plupload使用概述:
html页面上必须得有一个触发浏览器文件选择弹框的元素,这个元素必须拥有一个id,这个id需要配置在plupload实例化方法中(下面有具体实例);
<a-button
id="selectLogoFiles">
添加图片
</a-button>
plupload具体配置:
第一步,安装依赖
yarn add plupload
// npm install --save plupload
第二步,创建一个公共ali-oss.js文件封装上传方法;
import plupload from "plupload"
import tools from "@/utils/tools.js"
export default ({
that = "",
el = "",
multi_selection = false,
file_added = new Function(),
file_uploaded = new Function(),
uploader_progress = new Function(),
}) => {
if(!el) {
console.log("el 不能为空")
return;
}
if(!that) {
console.log("请传入this")
return;
}
const uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
// 服务器上传地址 必须设置否则后续setOption没有作用
url: 'https://oss-cn-beijing.aliyuncs.com',
flash_swf_url: 'https://oss-cn-beijing.aliyuncs.com',
silverlight_xap_url: 'https://oss-cn-beijing.aliyuncs.com',
// 上传文件类型限制
filters: {
mime_types: [{
title: "Image files",
extensions: "jpg,gif,png,bmp"
}, {
title: "Vedio files",
extensions: "mp4,avi,rm,rmvb,flv,mpg,mov,mkv"
}
],
// 限制上传文件大小
max_file_size: '10mb',
// 不允许选取重复文件
prevent_duplicates: true
}
})
// 设置上传配置
uploader.setOption({
browse_button: el,
multi_selection: multi_selection
});
// 文件上传进度
uploader.bind("UploadProgress", (uploader, file) => {
console.log("上传");
uploader_progress(file);
})
// 文件上传成功
uploader.bind("FileUploaded", (up, file, info) => {
file_uploaded(up, file, info, el);
})
// 文件添加成功并且上传
uploader.bind("FilesAdded", (uploader, files) => {
file_added(uploader, files, el);
let ossUploadParams;
// 请求签名、临时host、callback
that.$store.dispatch("SET_OSS_PARAMS").then(res => {
ossUploadParams = res;
let host = ossUploadParams['host'];
let policyBase64 = ossUploadParams['policy'];
let accessid = ossUploadParams['accessKeyId'];
let signature = ossUploadParams['signature'];
let callbackbody = ossUploadParams['callback'];
let key = ossUploadParams['dir'];
let new_multipart_params = {
'key': key + new Date().getTime() + tools.uuid(),
'policy': policyBase64,
'OSSAccessKeyId': accessid,
'success_action_status': '200', //让服务端返回200,不然,默认会返回204
'callback': callbackbody,
'signature': signature,
};
uploader.setOption({
'url': host,
'multipart_params': new_multipart_params
});
uploader.start();
})
})
return uploader;
}
为了方便在main.js中我把uploader方法绑定到Vue的原型上面了
import uploader from "@/utils/ali-oss.js"
Vue.prototype.$uploader = uploader;
第四步,调用
mounted(){
this.filesUploader();
},
methods: {
filesUploader() {
let that = this;
this.$uploader({
that: this,
el: "selectLogoFiles",
file_added(uploader, files) {
files.map(item => {
that.logoFile.push({
uid: item.id,
name: item.name
})
})
},
file_uploaded(uploader, file, info) {
that.log(uploader, file, info)
}
}).init();
}
}
中文帮助文档链接:link