vue 中使用webuploader

 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中央事件总线注册了一个事件