feat: 组件库替换

src/components/upload/FileUpload.vue

@@ -1,18 +1,16 @@
 <template>
-  <a-upload
-    :custom-request="customRequest"
+  <Upload
+    :customRequest="customRequest"
     action="/"
-    :limit="limit"
+    :maxCount="limit"
     :fileList="fileList"
     @change="onChange"
-    @success="handleSuccess"
-    @error="handleError"
   />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Message } from '@arco-design/web-vue';
+import { Upload, message } from 'ant-design-vue';
 import { fetchImageUploadFile, fetchUploadFile } from '@/api/all';
 import axios from 'axios';
 
@@ -70,8 +68,10 @@ watch(
 );
 
 let previousFileListLength = 0;
-//删除图片
-const onChange = (fileList) => {
+const onChange = (info) => {
+  const { fileList } = info;
+  
+  // 如果删除了文件
   if (fileList.length < previousFileListLength) {
     if (props.limit === 1) {
       if (fileList.length === 0) {
@@ -86,28 +86,35 @@ const onChange = (fileList) => {
       }
     }
   }
+  
+  // 处理上传成功的文件
+  if (info.file.status === 'done' && info.file.response) {
+    handleSuccess(info.file);
+  } else if (info.file.status === 'error') {
+    handleError(info.file.error);
+  }
 
   previousFileListLength = fileList.length;
 };
 
 const beforeUpload = (file, files) => {
   if (props.limit > 0 && files.length >= props.limit) {
-    Message.warning(`最多只能上传 ${props.limit} 张图片`);
+    message.warning(`最多只能上传 ${props.limit} 张图片`);
     return false; // 阻止上传
   }
   return true;
 };
 
 const handleError = (error) => {
-  Message.error('上传失败');
+  message.error('上传失败');
   console.error(error);
 };
 
 const customRequest = async (option) => {
-  const { onProgress, onError, onSuccess, fileItem, name } = option;
+  const { onProgress, onError, onSuccess, file, name } = option;
   try {
     // 1. 获取预签名上传URL
-    const response = await fetchUploadFile({ suffix: getFileExtension(fileItem.file.name) });
+    const response = await fetchUploadFile({ suffix: getFileExtension(file.name) });
     const preSignedUrl = response?.data?.upload_url;
 
     if (!preSignedUrl) {
@@ -115,9 +122,9 @@ const customRequest = async (option) => {
     }
     console.log('preSignedUrl', preSignedUrl);
     // 2. 使用预签名URL上传文件
-    const blob = new Blob([fileItem.file], { type: fileItem.file.type });
+    const blob = new Blob([file], { type: file.type });
     await axios.put(preSignedUrl, blob, {
-      headers: { 'Content-Type': fileItem.file.type },
+      headers: { 'Content-Type': file.type },
     });
 
     onSuccess(JSON.stringify(response));

src/components/upload/ImageUpload.vue

@@ -1,20 +1,19 @@
 <template>
-  <a-upload
-    :custom-request="customRequest"
-    list-type="picture-card"
+  <Upload
+    :customRequest="customRequest"
+    listType="picture-card"
     action="/"
-    :limit="limit"
+    :maxCount="limit"
     :fileList="fileList"
-    image-preview
+    :showUploadList="{ showPreviewIcon: true, showRemoveIcon: true }"
     @change="onChange"
-    @success="handleSuccess"
-    @error="handleError"
+    @preview="handlePreview"
   />
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import { Message } from '@arco-design/web-vue';
+import { Upload, message } from 'ant-design-vue';
 import { fetchImageUploadFile } from '@/api/all';
 import axios from 'axios';
 
@@ -72,8 +71,14 @@ watch(
 );
 
 let previousFileListLength = 0;
-//删除图片
-const onChange = (fileList) => {
+const handlePreview = (file) => {
+  console.log('Preview file:', file);
+};
+
+const onChange = (info) => {
+  const { fileList } = info;
+  
+  // 如果删除了文件
   if (fileList.length < previousFileListLength) {
     if (props.limit === 1) {
       if (fileList.length === 0) {
@@ -88,20 +93,27 @@ const onChange = (fileList) => {
       }
     }
   }
+  
+  // 处理上传成功的文件
+  if (info.file.status === 'done' && info.file.response) {
+    handleSuccess(info.file);
+  } else if (info.file.status === 'error') {
+    handleError(info.file.error);
+  }
 
   previousFileListLength = fileList.length;
 };
 
 const beforeUpload = (file, files) => {
   if (props.limit > 0 && files.length >= props.limit) {
-    Message.warning(`最多只能上传 ${props.limit} 张图片`);
+    message.warning(`最多只能上传 ${props.limit} 张图片`);
     return false; // 阻止上传
   }
   return true;
 };
 
 const handleError = (error) => {
-  Message.error('上传失败');
+  message.error('上传失败');
   console.error(error);
 };