在Vue項目中使用WebUploader實現文件上傳

簡介：
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左右

下載webuploader

下載並解壓後，文件目錄結構以下

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組件的樣式裏面

引入webuploader

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

方法1：直接引入文件

這裏咱們使用徹底壓縮版的webuploader.min.js,同時還要引入Uploader.swf 、 webuploader.css，因此能夠刪除其餘版本的文件，只留這三個文件，將解壓的webuploader文件夾直接放在static文件夾下.

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

<script src="./static/webuploader-0.1.5/webuploader.min.js"></script>

重啓項目後報錯了，說缺乏依賴 jquery,打開源碼 webuploader.js看一下

原來 webuploader是依賴於 juqery或者 Zepto的，那咱們引入 jquery,咱們去 jquery官網下載 jquery,並在 index.html中引入，注意，必定要在 webuploader.min.js以前引入，在這裏我下載的是 1.12.4版本

<script src="./static/webuploader-0.1.5/jQuery1.12.4.js"></script>

方法2：模塊化引入

下載webuploder

npm install webuploader --save

下載 jquery

npm install jquery@1.12.4

在 App.vue中引入 webuploder和 jquery

import $ from 'jquery'
import WebUploader from 'webuploader'

寫一個Demo

HTML部分

App.vue

<template>
  <div id="app">
      <div id="uploader" class="wu-example">
      <!--用來存放文件信息-->
        <div id="fileLilst" class="uploader-list"></div>
          <div class="btns">
            <!-- 選擇文件的按鈕 -->
              <div id="picker">選擇文件</div>
            <!-- 開始上傳按鈕 -->
              <button id="uploadBtn" class="btn btn-default">開始上傳</button>
          </div>
      </div>
  </div>
</template>

JS部分，初始化webuploader

在 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( '<div id="' + file.id + '" class="item">' +
              '<h4 class="info">' + file.name + '</h4>' +
              '<p class="state">等待上傳...</p>' +
          '</div>' );
      });

點擊 選擇文件按鈕後，選擇一個文件，就會如上圖所示，出現文件列表，從代碼能夠看出，他是在選擇文件以後，動態添加的的 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 = $('<div class="progress progress-striped active">' +
                '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                '</div>' +
              '</div>').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();

});