feat: 组件库替换

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);
 };