基于AntDesign vue的自定义文件上传

基于script setup 语法糖

所需参数大致如下，

详细可见 https://blog.csdn.net/qianqianNingmeng/article/details/126153710

const props = defineProps({
// 是否支持一次性选多个文件
multipleType: {
type: Boolean, // 参数类型
default: false, //默认值
required: false, //是否必传
},
// 上传文件接口接受的参数名称
uploadName: {
required: true,
default: 'file', //默认值
},
// 传递进来的字典值
value: {
required: true,
},
// 是不是接受何种文件类型
// true - 时接受各种文件 此时就算传了acceptType 也会忽略
// false 则以acceptType为准
isTypeAll: {
type: Boolean,
default: true,
},
// 上传文件选中的类型 默认全部类型文件
// 接受格式字符串多种格式,隔开 例如：'doc,docx'
acceptType: {
type: String,
default: "",
},
// 文件列表
showFileListArr: {
type: Array,
default: () => {
return [];
},
},
// 允许上传最大文件数目-默认1000 即不限数量
maxLength: {
type: Number,
default: 1000,
},
// 上传url
FileUploadUrl: {
type: String,
default: "/",
}, // 上传是否携带headers信息
headers: {
type: Object,
default: () => {
return "";
},
},
// 上传是否携带data
uplaodData: {
type: Object,
default: () => {
return { secretFlag: "N" };
},
},
});\

组件所含file参数会有一定的格式，上传接口返回的数据会存在response中保持一定格式,如果showFileListArr有值，组件会初始化相关格式数据，包括response字段，例如初始化response.data.fileId；

所以 为了能够成功回显 showFileListArr 文件回显数组一定要含有name(文件名称) fileType(文件类型) 字段

fileType(string 类型) 1：图片/2：视频/3：其他

图片 视频类型可预览-所以 保证 thumbUrl 该字段，这是图片预览 视频播放下载的的地址url

showFileListArr示例(必要字段)：

const showFileArr = ref([
{
fileId: "1553929283028746241",
name: "1656904733449.png",
fileType: "1",
thumbUrl:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fphoto%2F2012-3-2%2Fenterdesk.com-B526ECADD33DBD367676A93E051BA1EC.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662187484&t=ea7133f11704974e888254dad6ad3cd3'
},
{
fileId: "1553929314720907266",
name: "员工绩效管理办法V1.0.docx",
fileType: "3",
},
{
fileId: "1553930518096084993",
name: "movie.mp4",
fileType: "2",
thumbUrl:'https://www.runoob.com/try/demo_source/movie.mp4'
},
]);\