怎么在Vue項(xiàng)目中利用WebUploader實(shí)現(xiàn)文件上傳功能

本篇文章為大家展示了怎么在Vue項(xiàng)目中利用WebUploader實(shí)現(xiàn)文件上傳功能，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

WebUploader是由 Baidu WebFE(FEX) 團(tuán)隊(duì)開發(fā)的一個(gè)簡單的以 HTML5為主 ， FLASH為輔 的現(xiàn)代 文件上傳組件 。在現(xiàn)代的瀏覽器里面能充分發(fā)揮HTML5的優(yōu)勢，同時(shí)又 不摒棄主流IE瀏覽器 ，沿用原來的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ò)問題 導(dǎo)致傳輸錯(cuò)誤時(shí)，只需要 重傳出錯(cuò)分片 ，而不是整個(gè)文件。另外分片傳輸能夠更加實(shí)時(shí)的跟蹤上傳進(jìn)度。

預(yù)覽、壓縮

支持常用圖片格式jpg,jpeg,gif,bmp,png 預(yù)覽與壓縮 ，節(jié)省網(wǎng)絡(luò)數(shù)據(jù)傳輸。

解析 jpeg中的meta信息，對于各種 orientation 做了正確的處理，同時(shí)壓縮后上傳保留圖片的所有 原始meta數(shù)據(jù) 。

多途徑添加文件

支持 文件多選 ， 類型過濾 ， 拖拽 (文件&文件夾)，圖片 粘貼功能 。

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

HTML5 & FLASH

兼容主流瀏覽器 ，接口一致，實(shí)現(xiàn)了兩套運(yùn)行時(shí)支持，用戶無需關(guān)心內(nèi)部用了什么內(nèi)核。

同時(shí)Flash部分沒有做任何UI相關(guān)的工作，方便不關(guān)心flash的用戶擴(kuò)展和自定義業(yè)務(wù)需求

MD5秒傳

當(dāng)文件體積大、量比較多時(shí)，支持上傳前做文件 md5值驗(yàn)證 ，一致則可直接跳過。

如果服務(wù)端與前端統(tǒng)一修改算法， 取段md5 ，可大大 提升驗(yàn)證性能 ，耗時(shí)在20ms左右

下載webuploader

下載并解壓后，文件目錄結(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 
//沒有圖像處理的版本。    
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è)上傳文件按鈕的樣式，其他的樣式需要自己書寫，也可以直接追加在當(dāng)前 vue 組件的樣式里面

引入webuploader

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

方法1：直接引入文件

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

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

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

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

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

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

寫一個(gè)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 周期內(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',
  // 選擇文件的按鈕?？蛇x。
  // 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建，可能是input元素，也可能是flash.
  pick: '#picker',
  // 不壓縮image, 默認(rèn)如果是jpeg，文件上傳前會(huì)壓縮一把再上傳！
  resize: false
 });
 }

文件加入隊(duì)列前

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

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

文件加入隊(duì)列后

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

點(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ì)在文件上傳過程中觸發(fā)，可以利用該事件創(chuàng)建進(jìn)度條

// 文件上傳過程中創(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 = $('<div class="progress progress-striped active">' +
    '<div class="progress-bar" role="progressbar" >' +
    '</div>' +
    '</div>').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為上傳完畢，從上面代碼可以看到，在文件開始上傳后，會(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)度條的樣式都需要我們自己去寫， webuploader.css 中并沒有，這一點(diǎn)官網(wǎng)沒提醒，我第一次使用時(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();
});

上述內(nèi)容就是怎么在Vue項(xiàng)目中利用WebUploader實(shí)現(xiàn)文件上傳功能，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。