refactor: ♻️ 重构文件上传

重构文件上传

src/components/Upload/FileUpload.vue

@@ -24,7 +24,7 @@
           <a class="el-upload-list__item-name" @click="handleDownload(file)">
             <el-icon><Document /></el-icon>
             <span class="el-upload-list__item-file-name">{{ file.name }}</span>
-            <span class="el-icon--close" @click="handleRemove(file.url!)">
+            <span class="el-icon--close" @click.stop="handleRemove(file.url!)">
               <el-icon><Close /></el-icon>
             </span>
           </a>
@@ -45,6 +45,7 @@
 import {
   UploadRawFile,
   UploadUserFile,
+  UploadFile,
   UploadProgressEvent,
   UploadRequestOptions,
 } from "element-plus";
@@ -111,12 +112,12 @@ const props = defineProps({
 });
 
 const modelValue = defineModel("modelValue", {
-  type: [Array] as PropType<string[]>,
+  type: [Array] as PropType<UploadFile[]>,
   required: true,
   default: () => [],
 });
 
-const fileList = ref([] as UploadUserFile[]);
+const fileList = ref([] as UploadFile[]);
 
 const showProgress = ref(false);
 const progressPercent = ref(0);
@@ -125,12 +126,12 @@ const progressPercent = ref(0);
 watch(
   modelValue,
   (value) => {
-    fileList.value = value.map((url) => {
+    fileList.value = value.map((item) => {
-      const name = url.substring(url.lastIndexOf("/") + 1);
+      const name = item.name ? item.name : item.url?.substring(item.url.lastIndexOf("/") + 1);
       return {
         name: name,
-        url: url,
+        url: item.url,
-      } as UploadUserFile;
+      } as UploadFile;
     });
   },
   {
@@ -189,7 +190,11 @@ const handleProgress = (event: UploadProgressEvent) => {
  */
 const handleSuccess = (fileInfo: FileInfo) => {
   ElMessage.success("上传成功");
-  modelValue.value = [...modelValue.value, fileInfo.url];
+
+  modelValue.value = [
+    ...modelValue.value,
+    { name: fileInfo.name, url: fileInfo.url } as UploadFile,
+  ];
 };
 
 /**
@@ -204,8 +209,9 @@ const handleError = (_error: any) => {
  * 删除文件
  */
 function handleRemove(fileUrl: string) {
+  console.log(fileUrl);
   FileAPI.delete(fileUrl).then(() => {
-    modelValue.value = modelValue.value.filter((url) => url !== fileUrl);
+    modelValue.value = modelValue.value.filter((file) => file.url !== fileUrl);
   });
 }
 

src/views/demo/upload.vue

@@ -16,7 +16,7 @@
       </el-form-item>
 
       <el-form-item label="多图上传">
-        <MultiImageUpload v-model="picUrls" />
+        <MultiImageUpload v-model="picUrls" :limit="2" />
       </el-form-item>
 
       <el-form-item label="文件上传">
@@ -34,7 +34,7 @@ const picUrl = ref("https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg");
 const picUrls = ref(["https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg"]);
 
 const fileUrls = ref([
-  "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg",
+  { name: "照片1.jpg", url: "https://s2.loli.net/2023/05/24/yNsxFC8rLHMZQcK.jpg" },
-  "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg",
+  { name: "照片2.jpg", url: "https://s2.loli.net/2023/05/24/RuHFMwW4rG5lIqs.jpg" },
 ]);
 </script>