refactor: 重写uploadFile组件

src/components/UploadFile/src/UploadFile.vue

@@ -61,13 +61,18 @@ import { isString } from '@/utils/is'
 import { useUpload } from '@/components/UploadFile/src/useUpload'
 import { UploadFile } from 'element-plus/es/components/upload/src/upload'
 
+type ResponseFile = {
+  name: string
+  url: string
+}
+
 defineOptions({ name: 'UploadFile' })
 
 const message = useMessage() // 消息弹窗
 const emit = defineEmits(['update:modelValue'])
 
 const props = defineProps({
-  modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
+  modelValue: propTypes.oneOfType<ResponseFile[]>([Array<ResponseFile>]).isRequired,
   fileType: propTypes.array.def(['doc', 'xls', 'ppt', 'txt', 'pdf']), // 文件类型, 例如['png', 'jpg', 'jpeg']
   fileSize: propTypes.number.def(5), // 大小限制(MB)
   limit: propTypes.number.def(5), // 数量限制
@@ -121,7 +126,7 @@ const handleFileSuccess: UploadProps['onSuccess'] = (res: any): void => {
   // 删除自身
   const index = fileList.value.findIndex((item) => item.response?.data === res.data)
   fileList.value.splice(index, 1)
-  uploadList.value.push({ name: res.data, url: res.data })
+  uploadList.value.push({ name: res.data.name ?? res.data.url, url: res.data.url })
   if (uploadList.value.length == uploadNumber.value) {
     fileList.value.push(...uploadList.value)
     uploadList.value = []
@@ -152,35 +157,25 @@ const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
 // 监听模型绑定值变动
 watch(
   () => props.modelValue,
-  (val: string | string[]) => {
+  (val: ResponseFile[]) => {
+    console.log(val)
+
     if (!val) {
       fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
       return
     }
 
-    fileList.value = [] // 保障数据为空
+    fileList.value = val.map(({ name, url }) => ({
-    // 情况1：字符串
+      name: name ?? url.substring(url.lastIndexOf('/') + 1),
-    if (isString(val)) {
+      url
-      fileList.value.push(
+    }))
-        ...val.split(',').map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url }))
-      )
-      return
-    }
-    // 情况2：数组
-    fileList.value.push(
-      ...(val as string[]).map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url }))
-    )
   },
   { immediate: true, deep: true }
 )
 // 发送文件链接列表更新
 const emitUpdateModelValue = () => {
-  // 情况1：数组结果
+  const result = fileList.value.map(({ name, url }) => ({ name, url }))
-  let result: string | string[] = fileList.value.map((file) => file.url!)
+
-  // 情况2：逗号分隔的字符串
-  if (props.limit === 1 || isString(props.modelValue)) {
-    result = result.join(',')
-  }
   emit('update:modelValue', result)
 }
 </script>

src/components/UploadFile/src/useUpload.ts

@@ -31,7 +31,7 @@ export const useUpload = () => {
       // 模式二：后端上传
       // 重写 el-upload httpRequest 文件上传成功会走成功的钩子，失败走失败的钩子
       return new Promise((resolve, reject) => {
-        FileApi.updateFile({ file: options.file })
+        FileApi.updateFileEx({ file: options.file })
           .then((res) => {
             if (res.code === 0) {
               resolve(res)