webuploader是jquery组件，在vue中使用有点坑，首先介绍下我的项目环境是vue+webpack搭建的，由于一些原因（具体就不谈了），不得不使用这个上传控件，遇到一些问题，好在是搞定了，现把使用方法总结一下
首先引用js和css
import'../assets/js/jquery-1.10.2.min.js'
import'../assets/js/webuploader.js'
import'../assets/js/webuploader.css'
mounted 里创建实例，注意引用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创建实例之后，绑定各种事件
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)=>{
//如果有其他参数，这里可以赋值
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()
最重要的一件事，这些写完了之后，间歇性出现不能点击的问题，纠结了很久，发现问题，在调用这个组件的时候强制执行了
this.uploader.refresh()
这样才可以，用vue中央事件总线注册了一个事件
网友评论