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>