關於vue 中 使用 webuploader 遇到的坑及解決方案，本文以分片上傳為例解說，上傳壓縮包大小為2G左右在專案中實測
首先說一下vue中使用webuploader該如何引入呼叫
1. 肯定是安裝操作， 本人用的是淘寶映象 cnpm i webuploader -S 如果你沒有安裝淘寶映象，則使用 npm i webuploader -S
2. 引入操作,在具體的vue元件中引入 ， import Webuploader from 'webuploader', 這時候需要引入你寫的css樣式來覆蓋webuploader的預設css樣式。需要單獨寫一個css檔案然後import引入進來，例如：
import Webuploader from 'webuploader'
import ‘@/src/style/webuploader.css’
3. webuploader中 option的配置
let option = {
auto: false, // 是否開啟自動上傳，預設為false，設定為true，選擇檔案之後，無需操作自動上傳
swf： ‘./Uploader.swf’, // 指定絕對路徑
server: '/api/upgrade', // 上傳後臺服務地址,
pick: {
id: '.webuploader', // 指定容器，id中可以是class ，id ， dom
label: innerHTML形式，
multiple: false // 單檔案上傳 ，設定為true則開啟多檔案上傳。
},
accept: {
title: "壓縮包"，
extensions: 'zip, ZIP',
mimeTypes: 'application/zip'
},
chunked: true, //開啟分片上傳
chunkSize: 10 * 1024 * 1024, // 分片大小
threads: 10, // 執行緒數
methods: 'POST',
duplicate: false, // 是否允許上傳多個檔案
fileNumLimit: 1, // 限制檔案上傳個數
fileSingleSizeLimit: 1500 * 1024 * 1024, // 限制單個檔案上傳的大小
formData: {
guid: webuploader.Base.guid() // 給後端的資料
}
}
4. 初始化例項, 此處例項化例項寫在方法中。
export default {
data () {
return {
webupload: null
}
}
}
initData () {
this.webupload = webuploader.create(options) // 例項webuploader
// 接下來就是webuploder的一系列方法
this.webuplode.on('beforeFileQueued', file => {
// 檔案加入佇列之前的一系列操作
})
// fileQueued => 檔案加入佇列時的操作，
uploadStart => 開始上傳之前的操作
uploadSuccess => 上傳成功的操作
uploadError => 上傳失敗的操作
uploadProgress => 上傳時的進度，檔案上傳過程中建立實時顯示的進度條
uploadComplete => 上傳之後的操作，不管成功失敗都會執行
uploadFinished => 所有檔案上傳結束後的操作
reset => 重置webuploder例項
upload => 開始上傳 this.webupload.upload()
}
下篇部落格寫上程式碼