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

澄邁網站制作公司哪家好，找創(chuàng)新互聯(lián)！從網頁設計、網站建設、微信開發(fā)、APP開發(fā)、自適應網站建設等網站項目制作，到程序開發(fā)，運營維護。創(chuàng)新互聯(lián)2013年至今到現(xiàn)在10年的時間，我們擁有了豐富的建站經驗和運維經驗，來保證我們的工作的順利進行。專注于網站建設就選創(chuàng)新互聯(lián)。

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

分片、并發(fā)

分片 與 并發(fā) 結合，將一個大文件分割成多塊， 并發(fā)上傳 ，極大地提高大文件的上傳速度。

當 網絡問題 導致傳輸錯誤時，只需要 重傳出錯分片 ，而不是整個文件。另外分片傳輸能夠更加實時的跟蹤上傳進度。

預覽、壓縮

支持常用圖片格式jpg,jpeg,gif,bmp,png 預覽與壓縮 ，節(jié)省網絡數據傳輸。

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

多途徑添加文件

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

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

HTML5 & FLASH

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

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

MD5秒傳

當文件體積大、量比較多時，支持上傳前做文件 md5值驗證 ，一致則可直接跳過。

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

 

下載webuploader

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

Uploader.swf 

//樣式文件     
webuploader.css
//定制版    
webuploader.custom.js   
webuploader.custom.min.js
webuploader.fis.js
//只有Flash實現(xiàn)的版本
webuploader.flashonly.js
webuploader.flashonly.min.js
//只有HTML5實現(xiàn)的版本
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>

寫一個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',
  // 選擇文件的按鈕?？蛇x。
  // 內部根據當前運行是創(chuàng)建，可能是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">' +
    '<h5 class="info">' + file.name + '</h5>' +
    '<p class="state">等待上傳...</p>' +
   '</div>' );
  });

 

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

 

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

文件上傳中

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

// 文件上傳過程中創(chuàng)建進度條實時顯示。
  uploader.on( 'uploadProgress', function( file, percentage ) {
  console.log('文件上傳中',file,percentage)
   var $li = $( '#'+file.id ),
    $percent = $li.find('.progress .progress-bar');
   // 避免重復創(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 + '%' ); //根據上傳進度改變進度條寬度
  });

 

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

文件上傳成功、失敗、完成處理

文件上傳成功

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

 

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實現(xiàn)文件上傳功能，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網頁標題：怎么在Vue項目中利用WebUploader實現(xiàn)文件上傳功能
文章轉載：http://jinyejixie.com/article34/jjhese.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供網站排名、網站制作、外貿建站、移動網站建設、網站維護、網站建設

廣告

聲明：本網站發(fā)布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創(chuàng)新互聯(lián)