首先說一下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()
}
下篇博客寫上代碼