摘要：簡介是由團隊開發的一個簡單的以為主，為輔的現代文件上傳組件。采用大文件分片并發上傳，極大的提高了文件上傳效率。另外分片傳輸能夠更加實時的跟蹤上傳進度。選擇文件的按鈕。

簡介：
WebUploader是由Baidu WebFE(FEX)團隊開發的一個簡單的以HTML5為主，FLASH為輔的現代文件上傳組件。在現代的瀏覽器里面能充分發揮HTML5的優勢，同時又不摒棄主流IE瀏覽器，沿用原來的FLASH運行時，兼容IE6+，iOS 6+, android 4+。兩套運行時，同樣的調用方式，可供用戶任意選用。采用大文件分片并發上傳，極大的提高了文件上傳效率。

分片、并發

分片與并發結合，將一個大文件分割成多塊，并發上傳，極大地提高大文件的上傳速度。
當網絡問題導致傳輸錯誤時，只需要重傳出錯分片，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。

預覽、壓縮

支持常用圖片格式jpg,jpeg,gif,bmp,png預覽與壓縮，節省網絡數據傳輸。
解析jpeg中的meta信息，對于各種orientation做了正確的處理，同時壓縮后上傳保留圖片的所有原始meta數據。

多途徑添加文件

支持文件多選，類型過濾，拖拽(文件&文件夾)，圖片粘貼功能。
粘貼功能主要體現在當有圖片數據在剪切板中時（截屏工具如QQ(Ctrl + ALT + A), 網頁中右擊圖片點擊復制），Ctrl + V便可添加此圖片文件。

HTML5 & FLASH

兼容主流瀏覽器，接口一致，實現了兩套運行時支持，用戶無需關心內部用了什么內核。
同時Flash部分沒有做任何UI相關的工作，方便不關心flash的用戶擴展和自定義業務需求

MD5秒傳

當文件體積大、量比較多時，支持上傳前做文件md5值驗證，一致則可直接跳過。
如果服務端與前端統一修改算法，取段md5，可大大提升驗證性能，耗時在20ms左右

下載并解壓后，文件目錄結構如下

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

//只有Flash實現的版本
webuploader.flashonly.js
webuploader.flashonly.min.js
//只有HTML5實現的版本
webuploader.html5only.js            
webuploader.html5only.min.js        
//完整版
webuploader.js                   
webuploader.min.js 
//沒有圖像處理的版本。               
webuploader.noimage.js
webuploader.noimage.min.js
//不帶文件日志功能的版本（默認完整版帶日志功能）
webuploader.nolog.js
webuploader.nolog.min.js
//去除圖片處理的版本，包括HTML5和FLASH.
webuploader.withoutimage.js
webuploader.withoutimage.min.js

注意：這里的css文件很少，只是那個上傳文件按鈕的樣式，其他的樣式需要自己書寫，也可以直接追加在當前vue組件的樣式里面

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

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

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

重啟項目后報錯了，說缺少依賴jquery,打開源碼webuploader.js看一下

原來webuploader是依賴于juqery或者Zepto的，那我們引入jquery,我們去jquery官網下載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周期內實例化webuploader并進行配置

App.vue

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

可以在該事件回調函數中對文件類型進行篩選，或者根據文件大小決定是否開啟分片上傳

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

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

點擊選擇文件按鈕后，選擇一個文件，就會如上圖所示，出現文件列表，從代碼可以看出，他是在選擇文件之后，動態添加的的dom，顯示文件名稱以及狀態，關于文件的詳細信息，則可以從fileQueued事件的回調函數的參數file獲取，我們打印一下file

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

主要利用了webuploader的uploadProgress事件，該事件會在文件上傳過程中觸發，可以利用該事件創建進度條

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

uploadProgress事件的回調函數的參數`file是文件的一些信息，percentage則是文件上傳進度，1為上傳完畢，從上面代碼可以看到，在文件開始上傳后，會在fileQueued事件中動態創建的id=fileList元素中動態創建一個進度條容器，并根據上傳進度動態改變進度條的寬度，這樣就有了進度條的效果，需要注意的是，以上事件中動態生成的dom元素，例如文件列表、進度條的樣式都需要我們自己去寫，webuploader.css中并沒有，這一點官網沒提醒，我第一次使用時，也被坑了

可以在該事件回調函數中移除進度條、更改進度條狀態等操作

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

可以在該事件回調函數中更改提示文本，改變進度條樣式，刪除上傳失敗的文件等操作

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

可以在該事件回調函數中更改提示文本，改變進度條樣式等操作

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

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

});