直接上代码：
1.组件的使用
<UploadFileSingle
style="display:inline-block;margin-left:10px;"
:buttonFlag="true"
:filePath="orderInfo.filePath"
title="修改文件"
:accept="[
{
title: '2D格式', extensions: 'dwg,dxf,pdf' },
{
title: '3D格式',
extensions: 'step,stp,sldprt,prt,CATPart',
},
{
title: '压缩包', extensions: 'zip,rar' },
]"
max_file_size="100mb"
@ok="getFile"
></UploadFileSingle>
2.回调方法
getFile(val) {
console.log(val)
}
3.组件内容
<template>
<div class="upload-wrapper">
<a-button
v-if="buttonFlag"
slot="addonAfter"
type="primary"
:id="id"
:loading="loading"
>{
{
title }}</a-button
>
<a-input
v-else
placeholder="请输入内容"
v-model="url"
@change="handleChange"
allowClear
>
<a-button slot="addonAfter" type="primary" :id="id" :loading="loading">{
{
title
}}</a-button>
</a-input>
</div>
</template>
<script>
import uploader from "@/utils/ali-oss.js";
export default {
name: "fileUpload",
props: {
buttonFlag: {
type: Boolean,
default: false,
},
title: {
type: String,
default: "上传",
},
id: {
type: String,
default: "fileSingle",
},
filePath: {
type: String,
default: "",
},
extraData: {
type: Object,
default: function() {
return {
};
},
},
max_file_size: {
type: String,
default: "10mb",
},
accept: {
type: Array,
default: () => [],
},
},
watch: {
filePath(newVal, oldVal) {
this.url = newVal;
},
},
data() {
return {
url: "",
loading: false,
};
},
mounted() {
this.url = this.filePath;
this.$nextTick(() => {
this.initUploader();
});
},
methods: {
initUploader() {
let that = this;
uploader({
that: this,
el: this.id,
extraData: that.extraData,
accept: this.accept,
max_file_size: this.max_file_size,
file_added(uploader, files) {
that.loading = true;
},
file_uploaded(url, file) {
const path = url.host + url.key + (file.target_name || file.name);
that.loading = false;
that.$emit("ok", path, that.id);
that.$message.success("上传成功");
},
}).init();
},
handleChange() {
this.$emit("ok", this.url, this.id);
},
},
};
</script>
<style lang="less" scoped>
.upload-wrapper {
/deep/ .ant-input-group-addon {
padding: 0;
border: none;
background-color: transparent;
button {
border-radius: 0 4px 4px 0;
}
}
}
</style>
4.ali-oss.js文件
/**
* plupload中文文档
* https://www.phpin.net/tools/plupload/
*/
import plupload from "plupload";
import {
getOssToken } from '@/services/uploader/uploader';
let host = '';
let key = '';
export default ({
that = "", //vue实例
el = "", //点击触发上传的元素
extraData = {
}, //获取上传参数接口的额外参数
accept = [], //限制文件类型
multi_selection = false, //是否多文件上传
limitNum = 0,
prevent_duplicates = false, //是否允许选取重复文件
max_file_size = '10mb', //文件大小限制，传数字默认单位b，可以数字和单位组合
unique_names = 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;
}
console.log('获取文件类型', accept);
const uploader = new plupload.Uploader({
runtimes: 'html5,flash,silverlight,html4',
// 服务器上传地址，后续获取上传token后会通过setOption进行设置覆盖
url: 'http://oss.aliyuncs.com',
// 上传文件类型限制
filters: {
mime_types: accept,
// 限制上传文件大小
max_file_size: max_file_size,
// 不允许选取重复文件
prevent_duplicates: prevent_duplicates
},
unique_names: unique_names
})
// 设置上传配置
uploader.setOption({
browse_button: el,
multi_selection: multi_selection
});
// 文件上传进度
uploader.bind("UploadProgress", (uploader, file) => {
uploader_progress(file);
})
// 文件上传成功
uploader.bind("FileUploaded", (up, file, info) => {
file_uploaded({
host, key }, file);
})
// 发生错误
uploader.bind("Error", (up, info) => {
switch (info.code) {
case -600:
if (/[a-zA-Z]+/g.test(max_file_size)) {
that.$message.error('文件不能大于' + max_file_size);
} else {
that.$message.error('文件不能大于' + max_file_size + 'b');
}
break;
default:
that.$message.error(info.message);
break;
}
that.loading = false;
})
// 文件添加成功并且上传
uploader.bind("FilesAdded", (up, files) => {
if (multi_selection && limitNum > 0 && (up.files.length > limitNum)) {
that.$message.error(`只能选择${
limitNum}个文件上传`);
up.files.forEach((file, i) => {
uploader.splice();
})
return false;
}
file_added(uploader, files, el);
// 请求签名、临时host、callback
//这里替换成项目对应后端接口
getOssToken(extraData).then(res => {
host = res.host;
let policyBase64 = res.policy;
let accessid = res.accessId;
let signature = res.signature;
let callbackbody = res.callback;
key = res.dir;
let new_multipart_params = {
'key': key + '${filename}',
'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();
}).catch(() => {
that.loading = false;
})
})
return uploader;
}
完成！！！