簡(jiǎn)介：
WebUploader是由Baidu WebFE(FEX)團(tuán)隊(duì)開發(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ò)問題導(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部分沒有做任何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左右
下載webuploader
下載并解壓后铡原，文件目錄結(jié)構(gòu)如下
//SWF文件，當(dāng)使用Flash運(yùn)行時(shí)需要引入商叹。
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ò)了，說(shuō)缺少依賴
jquery,打開源碼webuploader.js看一下
原來(lái)
webuploader是依賴于juqery或者Zepto的扳躬，那我們引入jquery,我們?nèi)?code>jquery官網(wǎng)下載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'
寫一個(gè)Demo
HTML部分
App.vue
<template>
<div id="app">
<div id="uploader" class="wu-example">
<!--用來(lái)存放文件信息-->
<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',
// 選擇文件的按鈕役纹∨妓ぃ可選。
// 內(nèi)部根據(jù)當(dāng)前運(yùn)行是創(chuàng)建促脉，可能是input元素辰斋，也可能是flash.
pick: '#picker',
// 不壓縮image, 默認(rèn)如果是jpeg信不，文件上傳前會(huì)壓縮一把再上傳！
resize: false,
//是否開啟自動(dòng)上傳
auto:false
});
}
文件加入隊(duì)列前
可以在該事件回調(diào)函數(shù)中對(duì)文件類型進(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">' +
'<h4 class="info">' + file.name + '</h4>' +
'<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ì)在文件上傳過(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 = $('<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 + '%' ); //根據(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();
});
