?webuploader是jquery組件，在vue中使用有點坑，首先介紹下我的項目環(huán)境是vue+webpack搭建的，由于一些原因（具體就不談了），不得不使用這個上傳控件，遇到一些問題，好在是搞定了，現(xiàn)把使用方法總結一下
首先引用js和css
import'../assets/js/jquery-1.10.2.min.js'
import'../assets/js/webuploader.js'
import'../assets/js/webuploader.css'
mounted 里創(chuàng)建實例，注意引用swf
this.uploader=WebUploader.create({
swf:'../assets/js/Uploader.swf',
title: Math.random(),
auto:true,
server:'/api/object/putObject',
pick:'#picker',
resize:false,
paste:document.body,
disableGlobalDnd:true,
thumb:{
width:100,
height:100,
quality:70,
allowMagnify:true,
crop:true,
type:'jpg,jpeg,png,pdf,mp4,avi.mp3,rar'
},
compress:false,
prepareNextFile:true,
chunked:false,
chunkSize:5000*1024,
threads:true,
formData:{
},
fileNumLimit:10,
fileSingleSizeLimit:1000*1024*1024,
duplicate:true
})
mounted創(chuàng)建實例之后，綁定各種事件
this.uploader.on('fileQueued',file=>{
this.filesList.push({
id:file.id,
name:file.name,
size:file.size,
percentage:0
})
})
this.uploader.on('startUpload', ()=>{
})
this.uploader.on('uploadProgress', (file,percentage)=>{
this.filesList.forEach(item=>{
if(file.id===item.id) {
item.percentage=percentage*100+'%'
}
})
})
this.uploader.on('uploadBeforeSend', (block,data)=>{
//如果有其他參數(shù)，這里可以賦值
console.log(this.parameters)
})
this.uploader.on('uploadSuccess', (file,response)=>{
console.log(response._raw)
this.filesList.forEach(item=>{
if(file.id===item.id) {
item.percentage=response.msg
}
})
})
this.uploader.on('uploadError',function(file) {
console.log('上傳出錯1')
})
提交就直接調用
this.uploader.upload()?
最重要的一件事，這些寫完了之后，間歇性出現(xiàn)不能點擊的問題，糾結了很久，發(fā)現(xiàn)問題，在調用這個組件的時候強制執(zhí)行了
this.uploader.refresh()
這樣才可以，用vue中央事件總線注冊了一個事件
