一、html
<template>
<div>
<div id="upload" ref="button"></div>
</div>
</template>
二、js
<script>
import $ from 'jquery';
import WebUploader from 'webuploader';
import uploaderSwf from 'webuploader/dist/Uploader.swf';
export default {
name: 'PrivatizationUpload',
data() {
return {
chunked: false,
attachments: {},
threads: 1,
fileKey: null
};
},
computed: {
btnId() {
return Utils.uuid();
},
options() {
return {
server: 'http://www.baidu.com',
chunked: false,
swf: uploaderSwf,
pick: {
id: '#upload',
multiple: false
},
auto: true,
fileSingleSizeLimit: 50 * 1024 * 1024 // 50 M
};
}
},
methods: {
},
created() {
},
mounted() {
let $this = this;
WebUploader.Uploader.register({
name:'file-store-token',
'before-send-file': 'beforeSendFile' //文件发送之前的监听函数
}, {
beforeSendFile: function(file) {
let me = this;
let d = WebUploader.Deferred();
let formData = { id:111,name:222 };
$this.uploader.option('formData', formData);//参数改变完成赋值
d.resolve(file);//然后继续发送文件
return d.promise();
}
});
this.uploader = WebUploader.create(this.options);//初始化webupload
document.querySelector('.webuploader-pick').innerHTML = '<button>上传附件</button>';//自定义上传按钮
this.uploader.on('uploadProgress', (file, percentage) => {
console.log(percentage)//文件上传进度
});
this.uploader.on('uploadSuccess', (file, res) => {
console.log(res)//文件上传成功
});
this.uploader.on('error', type => {
console.log(type)//文件上传格式校验失败
});
this.uploader.on('uploadError', (file, reason) => {
console.log(reason)//文件上传失败
});
},
destroyed() { //页面注销后销毁实例
WebUploader.Uploader.unRegister('file-store-token');//删除注册的插件
if (this.uploader) {
try {
this.uploader.destroy();
} catch (e) {
//
}
}
}
};
</script>