WebUploader文件上传(react),带参数
2017-12-06 15:36
337 查看
1,导入uploader.swf;webuploader.css;webuploader.nolog.min.js
2,在生命周期中写入
3,在function中传入参数
4,清除图片
5,html
2,在生命周期中写入
componentDidMount(){ var _this=this; var $picture =$(".banner-pic"); this._uploader = WebUploader.create({ //自动上传 //auto: true, // disableGlobalDnd: true, // swf文件路径 swf:AppConf.contextPath+'lib/Uploader.swf', // 文件接收服务端。 server: xxxxxx // 选择文件的按钮。可选。 // 内部根据当前运行是创建,可能是input元素,也可能是flash. pick: { id:'#ban_uploader', multiple:false }, accept: { title: 'Images', extensions: 'jpg,jpeg,bmp,png', mimeTypes: 'image/jpg,image/jpeg,image/png,image/bmp' }, headers: {'Authorization': AccessToken}, //上传并发数 threads:1, //{int} [可选] [默认值:undefined] 验证文件总数量, 超出则不允许加入队列 fileNumLimit:1, //{int} [可选] [默认值:undefined] 验证单个文件大小是否超出限制, 超出则不允许加入队列。 fileSizeLimit: 2 * 1024 * 1024, // 总共的最大限制 limitSize M fileSingleSizeLimit: 2 * 1024 * 1024 , // 单文件的最大限制 limitSize M // fileSingleSizeLimit:1024, method:'POST', // 不压缩image, 默认如果是jpeg,文件上传前会压缩一把再上传! resize: false, duplicate :true }); this._uploader.on( 'beforeFileQueued', function() { _this.setState({ errshow:false, errtext:'' }); var fi=_this._uploader.getFiles(); if(fi.length) { _this._uploader.removeFile(fi[0] ,true); _this._uploader.reset(); } $(".banner-pic").find('img').remove(); }); // 当有文件添加进来的时候 this._uploader.on('fileQueued', function (file) { _this.setState({ errshow:false, errtext:'' }); //pick放置图片位置 var $img = $('<img class="picture-in">'); $picture.append( $img ); //var $img = $picture.find('img'); // 创建缩略图 _this._uploader.makeThumb(file, function (error, src) { if (error) { $img.replaceWith('<span>不能预览</span>'); return; } $img.attr('src', src); }); }); //清除过程中的报错 this._uploader.on( 'uploadStart', function() { _this.setState({ errshow:false, errtext:'' }); }); this._uploader.on( 'uploadProgress', function(){ _this.setState({ errshow:false, errtext:'' }); }); // 文件上传成功。 this._uploader.on( 'uploadSuccess', function( file ,res) { if(res.code==200){ _this.setState({ errshow:false, errtext:'' }); if(_this.state.type===1) { _this.setState({ saveId: res.data.bannerId }); _this.bannerUp(); }else{ _this.canclemsg() _this.setState({ saveId: res.data.bannerId }); } }else{ _this.setState({ errshow:true, errtext:'上传图片失败!' }); } }); this._uploader.on("uploadError", function (type) { if (type == "Q_TYPE_DENIED") { _this.setState({ errshow:true, errtext:'请上传JPG、PNG、GIF、BMP格式文件!' }); } else if (type == "Q_EXCEED_SIZE_LIMIT") { _this.setState({ errshow:true, errtext:'文件大小不能超过2M!' }); }else { _this.setState({ errshow:true, errtext:'上传图片失败!' }); } }); }
3,在function中传入参数
saveBuild(){ var param = Object.assign({}, {bannerName: this.state.bannerName, link: this.state.link,color:this.state.color}); this._uploader.option('formData', param); this._uploader.upload(); if($(".banner-pic").find('img')){ this.setState({ errshow:true, errtext:'请上传图片!' }); }else{ this.setState({ errshow:false, errtext:'' }); } }
4,清除图片
$(".banner-pic").find('img').remove(); var fil=this._uploader.getFiles(); console.log(fil); if(fil.length) { this._uploader.removeFile(fil[0] ,true); this._uploader.reset(); }
5,html
<div className="banner-pic"> <div className="uploder-box"> <div id="ban_uploader">上传图片</div> </div> </div> <div className={"error-input"} >{this.state.errtext}</div> <div className="banner-log"onClick={this.saveBuild} >保存</div>
相关文章推荐
- 使用webUploader上传文件时前台添加自定义参数(java后台获取)
- web大文件上传控件-设置附加参数-Xproer.HttpUploader6
- webuploader 上传文件参数设置
- javascript+C#本地大文件上传到服务器方法(WebUploader)
- WebUploader 大文件或视频上传
- WebUploader插件上传大文件单文件和多文件JAVA版使用总结
- springmvc中使用webuploader上传多张图片;maven中读取配置文件中的属性(路径)
- WebUploader UEditor chrome 点击上传文件选择框会延迟几秒才会显示 反应很慢
- jquery组件WebUploader文件上传用法详解
- jQuery webuploader分片上传大文件
- 百度上传工具webuploader,图片上传附加参数
- Spring Boot 利用WebUploader进行文件上传功能
- asp.net mvc+webuploader大文件分片上传
- Web大文件上传控件-asp.net-bug修复-Xproer.HttpUploader6.2
- 使用WebUploader实现上传文件功能(一)
- webuploader获取当前待上传文件的个数
- Thinkphp拖拽上传文件-使用webuploader插件(自己稍微改动了一些地方)——不切片上传
- jquery组件WebUploader文件上传用法详解
- Thinkphp拖拽上传文件-使用webuploader插件(自己改动了一些地方)——分片上传
- WebUploader点击上传文件选择框会延迟几秒才会显示