vue+阿里oss存储——封装上传组件——uploadFileSingle

下面组件是支持单个文件上传的，可以通过指定accept字段来限制上传文件的类型。
如果需要多个文件同时上传，则需要对下面的组件进行稍微的改动。自行处理哈。

直接上代码：

1.组件的使用

<UploadFileSinglestyle="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-buttonv-if="buttonFlag"slot="addonAfter"type="primary":id="id":loading="loading">{{ title }}</a-button><a-inputv-elseplaceholder="请输入内容"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;
}

完成！！！多多积累，多多收获！！！