基于ant-vue3.0封装上传组件（OBS）

<template>  
<div>  
<a-upload  
v-model:file-list="currentFileList"  
name="file"  
:disabled="disabled"  
:max-count="maxCount"  
:customRequest="customRequest"  
:before-upload="beforeUpload"  
@change="change"  
>  
<a-button v-if="!disabled" :loading="state.upLoading">  
上传  
<upload-outlined />  
</a-button>  
</a-upload>  
</div>  
</template>  
  
<script setup lang="ts" name="nUpload">  
import { computed, reactive } from 'vue';  
import { uploadFile } from '/@/api/common';  
import { message } from 'ant-design-vue';  
  
const props = defineProps({  
// 文件列表  
fileList: {  
type: Array,  
default: () => []  
},  
// 类型限制  
forbidden: {  
type: Array,  
default: () => []  
},  
// 最大上传个数  
maxCount: {  
type: Number,  
default: 1  
},  
// 禁用状态  
disabled: {  
type: Boolean,  
default: false  
},  
// 桶名  
sysCode: {  
type: String,  
default: ''  
},  
// 桶文件  
modelCode: {  
type: String,  
default: ''  
}  
});  
const emits = defineEmits(['update:fileList', 'change']);  
const state = reactive({  
fileArr: [],  
upLoading: false  
});  
// 当前文件列表  
const currentFileList = computed({  
get: () => props.fileList,  
set: val => {  
emits('update:fileList', val);  
}  
});  
// 自定义请求  
const customRequest = option => {  
const formData = new FormData();  
const { file } = option;  
// 文件流  
formData.append('file', file);  
// 桶的别名  
formData.append('sysCode', props.sysCode);  
// 模块名称 桶下文件夹  
formData.append('modelCode', props.modelCode);  
// 是否公共读， 1公共，2私有  
formData.append('publicFlag', '1');  
option.onProgress();  
state.upLoading = true;  
uploadFile(formData)  
.then(res => {  
state.upLoading = false;  
if (res.isSuccess) {  
option.onSuccess();  
// 新增文件  
state.fileArr.push({  
name: res.data.originalName,  
url: res.data.fileUrl  
});  
emits('update:fileList', state.fileArr);  
} else {  
option.onError();  
}  
})  
.catch(() => {  
state.upLoading = false;  
option.onError();  
});  
};  
// 在上传之前校验  
const beforeUpload = file => {  
let isForbidden = false;  
props.forbidden.map((it: any) => {  
//获取最后一个.的位置  
let index = file.name.lastIndexOf('.');  
//获取后缀  
let ext = file.name.substr(index + 1);  
if (ext === it) isForbidden = true;  
});  
// 文件类型错误则上传失败，更新文件列表  
if (isForbidden) message.error('请上传正确的文件格式');  
return !isForbidden;  
};  
// 文件筛选，同步更新  
const filterRefresh = file => {  
state.fileArr = state.fileArr.filter(it => {  
return it.uid !== file.uid;  
});  
emits('update:fileList', state.fileArr);  
};  
// 上传文件有变动  
const change = ({ file }) => {  
if (file.status === 'error') {  
message.error('上传失败！');  
filterRefresh(file);  
} else if (file.status === 'removed') {  
message.success('删除成功！');  
filterRefresh(file);  
} else if (!file.status) {  
// 上传了错误格式的文件，清除  
filterRefresh(file);  
}  
};  
</script>  
  
<style scoped lang="less"></style>