摘要：簡(jiǎn)介是由團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以為主，為輔的現(xiàn)代文件上傳組件。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。選擇文件的按鈕。

簡(jiǎn)介：
WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開(kāi)發(fā)的一個(gè)簡(jiǎn)單的以HTML5為主，FLASH為輔的現(xiàn)代文件上傳組件。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢(shì)，同時(shí)又不摒棄主流IE瀏覽器，沿用原來(lái)的FLASH運(yùn)行時(shí)，兼容IE6+，iOS 6+, android 4+。兩套運(yùn)行時(shí)，同樣的調(diào)用方式，可供用戶任意選用。采用大文件分片并發(fā)上傳，極大的提高了文件上傳效率。

分片、并發(fā)

分片與并發(fā)結(jié)合，將一個(gè)大文件分割成多塊，并發(fā)上傳，極大地提高大文件的上傳速度。
當(dāng)網(wǎng)絡(luò)問(wèn)題導(dǎo)致傳輸錯(cuò)誤時(shí)，只需要重傳出錯(cuò)分片，而不是整個(gè)文件。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。

預(yù)覽、壓縮

支持常用圖片格式j(luò)pg,jpeg,gif,bmp,png預(yù)覽與壓縮，節(jié)省網(wǎng)絡(luò)數(shù)據(jù)傳輸。
解析jpeg中的meta信息，對(duì)于各種orientation做了正確的處理，同時(shí)壓縮后上傳保留圖片的所有原始meta數(shù)據(jù)。

多途徑添加文件

支持文件多選，類型過(guò)濾，拖拽(文件&文件夾)，圖片粘貼功能。
粘貼功能主要體現(xiàn)在當(dāng)有圖片數(shù)據(jù)在剪切板中時(shí)（截屏工具如QQ(Ctrl + ALT + A), 網(wǎng)頁(yè)中右擊圖片點(diǎn)擊復(fù)制），Ctrl + V便可添加此圖片文件。

HTML5 & FLASH

兼容主流瀏覽器，接口一致，實(shí)現(xiàn)了兩套運(yùn)行時(shí)支持，用戶無(wú)需關(guān)心內(nèi)部用了什么內(nèi)核。
同時(shí)Flash部分沒(méi)有做任何UI相關(guān)的工作，方便不關(guān)心flash的用戶擴(kuò)展和自定義業(yè)務(wù)需求

MD5秒傳

當(dāng)文件體積大、量比較多時(shí)，支持上傳前做文件md5值驗(yàn)證，一致則可直接跳過(guò)。
如果服務(wù)端與前端統(tǒng)一修改算法，取段md5，可大大提升驗(yàn)證性能，耗時(shí)在20ms左右

下載并解壓后，文件目錄結(jié)構(gòu)如下

Uploader.swf  
//樣式文件                  
webuploader.css
//定制版               
webuploader.custom.js            
webuploader.custom.min.js
        
webuploader.fis.js

//只有Flash實(shí)現(xiàn)的版本
webuploader.flashonly.js
webuploader.flashonly.min.js
//只有HTML5實(shí)現(xiàn)的版本
webuploader.html5only.js            
webuploader.html5only.min.js        
//完整版
webuploader.js                   
webuploader.min.js 
//沒(méi)有圖像處理的版本。               
webuploader.noimage.js
webuploader.noimage.min.js
//不帶文件日志功能的版本（默認(rèn)完整版帶日志功能）
webuploader.nolog.js
webuploader.nolog.min.js
//去除圖片處理的版本，包括HTML5和FLASH.
webuploader.withoutimage.js
webuploader.withoutimage.min.js

注意：這里的css文件很少，只是那個(gè)上傳文件按鈕的樣式，其他的樣式需要自己書(shū)寫(xiě)，也可以直接追加在當(dāng)前vue組件的樣式里面

使用Web Uploader文件上傳需要引入三種資源：JS, CSS, SWF。

這里我們使用完全壓縮版的webuploader.min.js,同時(shí)還要引入Uploader.swf 、 webuploader.css，所以可以刪除其他版本的文件，只留這三個(gè)文件，將解壓的webuploader文件夾直接放在static文件夾下.

在index.html中引入webuploader.min.js

重啟項(xiàng)目后報(bào)錯(cuò)了，說(shuō)缺少依賴jquery,打開(kāi)源碼webuploader.js看一下

原來(lái)webuploader是依賴于juqery或者Zepto的，那我們引入jquery,我們?nèi)?b>jquery官網(wǎng)下載jquery,并在index.html中引入，注意，一定要在webuploader.min.js之前引入，在這里我下載的是1.12.4版本

下載webuploder

npm install webuploader --save

下載jquery

npm install jquery@1.12.4

在App.vue中引入webuploder和jquery

import $ from "jquery"
import WebUploader from "webuploader"

App.vue

在Vue的mounted周期內(nèi)實(shí)例化webuploader并進(jìn)行配置

App.vue

mounted:function(){
        var uploader = WebUploader.create({
        // swf文件路徑
        swf:"../static/webuploader-0.1.5/Uploader.swf",
        // 文件接收服務(wù)端。
        server: "http://webuploader.duapp.com/server/fileupload.php",
        // 選擇文件的按鈕。可選。
        // 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash.
        pick: "#picker",
        // 不壓縮image, 默認(rèn)如果是jpeg，文件上傳前會(huì)壓縮一把再上傳！
        resize: false,
        //是否開(kāi)啟自動(dòng)上傳
        auto:false
    });
  }

可以在該事件回調(diào)函數(shù)中對(duì)文件類型進(jìn)行篩選，或者根據(jù)文件大小決定是否開(kāi)啟分片上傳

uploader.on( "beforeFileQueued", function( file) {
   console.log("文件加入隊(duì)前",file)
});

 // 當(dāng)有文件被添加進(jìn)隊(duì)列的時(shí)候
      uploader.on( "fileQueued", function( file ) {
        console.log("文件加入隊(duì)列后")
          var $list = $("#fileList")
          $list.append( "
" +
              "
" + file.name + "
" +
              "
等待上傳...
" +
          "
" );
      });

點(diǎn)擊選擇文件按鈕后，選擇一個(gè)文件，就會(huì)如上圖所示，出現(xiàn)文件列表，從代碼可以看出，他是在選擇文件之后，動(dòng)態(tài)添加的的dom，顯示文件名稱以及狀態(tài)，關(guān)于文件的詳細(xì)信息，則可以從fileQueued事件的回調(diào)函數(shù)的參數(shù)file獲取，我們打印一下file

ext------------------------------文件后綴
id-------------------------------文件ID
lastModifiedDate-----------------文件最后修改時(shí)間
name-----------------------------文件名稱
size-----------------------------文件大小（這里是以字節(jié)為單位，1字節(jié)=1KB,1M=1024KB,1m=1024*1024字節(jié)）
source---------------------------包含一些文件信息和方法，例如唯一標(biāo)識(shí)的`ruid`、`uid`、`_hash`

主要利用了webuploader的uploadProgress事件，該事件會(huì)在文件上傳過(guò)程中觸發(fā)，可以利用該事件創(chuàng)建進(jìn)度條

// 文件上傳過(guò)程中創(chuàng)建進(jìn)度條實(shí)時(shí)顯示。
      uploader.on( "uploadProgress", function( file, percentage ) {
        console.log("文件上傳中",file,percentage)
          var $li = $( "#"+file.id ),
              $percent = $li.find(".progress .progress-bar");
          // 避免重復(fù)創(chuàng)建
          if ( !$percent.length ) {
              $percent = $("
" +
                "
" +
                "
" +
              "
").appendTo( $li ).find(".progress-bar");
          }
          $li.find("p.state").text("上傳中");
          $percent.css( "width", percentage * 100 + "%" );  //根據(jù)上傳進(jìn)度改變進(jìn)度條寬度
      });

uploadProgress事件的回調(diào)函數(shù)的參數(shù)`file是文件的一些信息，percentage則是文件上傳進(jìn)度，1為上傳完畢，從上面代碼可以看到，在文件開(kāi)始上傳后，會(huì)在fileQueued事件中動(dòng)態(tài)創(chuàng)建的id=fileList元素中動(dòng)態(tài)創(chuàng)建一個(gè)進(jìn)度條容器，并根據(jù)上傳進(jìn)度動(dòng)態(tài)改變進(jìn)度條的寬度，這樣就有了進(jìn)度條的效果，需要注意的是，以上事件中動(dòng)態(tài)生成的dom元素，例如文件列表、進(jìn)度條的樣式都需要我們自己去寫(xiě)，webuploader.css中并沒(méi)有，這一點(diǎn)官網(wǎng)沒(méi)提醒，我第一次使用時(shí)，也被坑了

可以在該事件回調(diào)函數(shù)中移除進(jìn)度條、更改進(jìn)度條狀態(tài)等操作

 uploader.on( "uploadSuccess", function( file,response ) {
    console.log("文件上傳成功",file,response)
      $( "#"+file.id ).find("p.state").text("已上傳");
  });

可以在該事件回調(diào)函數(shù)中更改提示文本，改變進(jìn)度條樣式，刪除上傳失敗的文件等操作

uploader.on( "uploadError", function( file,reason ) {
console.log("文件上傳失敗",file,reason)
$( "#"+file.id ).find("p.state").text("上傳出錯(cuò)");
});

可以在該事件回調(diào)函數(shù)中更改提示文本，改變進(jìn)度條樣式等操作

uploader.on( "uploadComplete", function( file ) {

console.log("文件上傳完成")
  $( "#"+file.id ).find(".progress").fadeOut();

});