簡介：
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.jswebuploader.fis.js//只有Flash實現的版本webuploader.flashonly.jswebuploader.flashonly.min.js//只有HTML5實現的版本webuploader.html5only.js webuploader.html5only.min.js //完整版webuploader.js webuploader.min.js //沒有圖像處理的版本。 webuploader.noimage.jswebuploader.noimage.min.js//不帶文件日志功能的版本（默認完整版帶日志功能）webuploader.nolog.jswebuploader.nolog.min.js//去除圖片處理的版本，包括HTML5和FLASH.webuploader.withoutimage.jswebuploader.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>
寫一個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 }); }文件加入隊列前
可以在該事件回調函數中對文件類型進行篩選，或者根據文件大小決定是否開啟分片上傳
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();});總結
以上所述是小編給大家介紹的Vue項目中使用WebUploader實現文件上傳的方法，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
新聞熱點
疑難解答
