refactor: 修改upload相关组件

src/components/UploadFile/src/UploadFile.vue

@@ -58,21 +58,16 @@
 import { propTypes } from '@/utils/propTypes'
 import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
 import { isString } from '@/utils/is'
-import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { useUpload, ResponseFile } 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<ResponseFile[]>([Array<ResponseFile>]).isRequired,
+  modelValue: propTypes.oneOfType<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), // 数量限制
@@ -158,8 +153,6 @@ const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
 watch(
   () => props.modelValue,
   (val: ResponseFile[]) => {
-    console.log(val)
-
     if (!val) {
       fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
       return

src/components/UploadFile/src/UploadImg.vue

@@ -118,7 +118,7 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
 // 图片上传成功提示
 const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
   message.success('上传成功')
-  emit('update:modelValue', res.data)
+  emit('update:modelValue', res.data.url)
 }
 
 // 图片上传错误提示

src/components/UploadFile/src/UploadImgs.vue

@@ -51,7 +51,7 @@ import type { UploadFile, UploadProps, UploadUserFile } from 'element-plus'
 import { ElNotification } from 'element-plus'
 
 import { propTypes } from '@/utils/propTypes'
-import { useUpload } from '@/components/UploadFile/src/useUpload'
+import { useUpload, ResponseFile } from '@/components/UploadFile/src/useUpload'
 
 defineOptions({ name: 'UploadImgs' })
 
@@ -70,7 +70,7 @@ type FileTypes =
   | 'image/x-icon'
 
 const props = defineProps({
-  modelValue: propTypes.oneOfType<string | string[]>([String, Array<String>]).isRequired,
+  modelValue: propTypes.oneOfType<ResponseFile[]>([]).isRequired,
   drag: propTypes.bool.def(true), // 是否支持拖拽上传 ==> 非必传（默认为 true）
   disabled: propTypes.bool.def(false), // 是否禁用上传组件 ==> 非必传（默认为 false）
   limit: propTypes.number.def(5), // 最大图片上传数 ==> 非必传（默认为 5张）
@@ -111,7 +111,7 @@ const beforeUpload: UploadProps['beforeUpload'] = (rawFile) => {
 
 // 图片上传成功
 interface UploadEmits {
-  (e: 'update:modelValue', value: string[]): void
+  (e: 'update:modelValue', value: ResponseFile[]): void
 }
 
 const emit = defineEmits<UploadEmits>()
@@ -120,7 +120,7 @@ const uploadSuccess: 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 = []
@@ -132,22 +132,22 @@ const uploadSuccess: UploadProps['onSuccess'] = (res: any): void => {
 // 监听模型绑定值变动
 watch(
   () => props.modelValue,
-  (val: string | string[]) => {
+  (val: ResponseFile[]) => {
     if (!val) {
       fileList.value = [] // fix：处理掉缓存，表单重置后上传组件的内容并没有重置
       return
     }
 
-    fileList.value = [] // 保障数据为空
+    fileList.value = val.map(({ name, url }) => ({
-    fileList.value.push(
+      name: name ?? url.substring(url.lastIndexOf('/') + 1),
-      ...(val as string[]).map((url) => ({ name: url.substring(url.lastIndexOf('/') + 1), url }))
+      url
-    )
+    }))
   },
   { immediate: true, deep: true }
 )
 // 发送图片链接列表更新
 const emitUpdateModelValue = () => {
-  let result: string[] = fileList.value.map((file) => file.url!)
+  let result: ResponseFile[] = fileList.value.map(({ name, url }) => ({ name, url: url! }))
   emit('update:modelValue', result)
 }
 // 删除图片
@@ -157,7 +157,7 @@ const handleRemove = (uploadFile: UploadFile) => {
   )
   emit(
     'update:modelValue',
-    fileList.value.map((file) => file.url!)
+    fileList.value.map(({ name, url }) => ({ name, url: url! }))
   )
 }
 

src/components/UploadFile/src/useUpload.ts

@@ -3,6 +3,11 @@ import CryptoJS from 'crypto-js'
 import { UploadRawFile, UploadRequestOptions } from 'element-plus/es/components/upload/src/upload'
 import axios from 'axios'
 
+export type ResponseFile = {
+  name: string
+  url: string
+}
+
 export const useUpload = () => {
   // 后端上传地址
   const uploadUrl = import.meta.env.VITE_UPLOAD_URL