WebUploader文件上传（react），带参数

1，导入uploader.swf;webuploader.css;webuploader.nolog.min.js
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>