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>