签入版本

RXThinkCMF_Laravel13_AntdVue/zh/tools/upload.md

@@ -247,35 +247,40 @@ function save_remote_file(string $url, string $saveDir = ''): string|false
 
 ## 前端集成
 
-### Element Plus 上传组件
+### AntDesign 上传组件
 
 ```vue
 <template>
-  <el-upload
+  <a-upload
     :action="'/api/upload/uploadFile'"
     :data="{ type: 'image' }"
     :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleUploadSuccess"
     :before-upload="beforeUpload"
+    :show-upload-list="false"
+    @change="handleUploadChange"
   >
-    <el-button type="primary">上传图片</el-button>
-  </el-upload>
+    <a-button type="primary">上传图片</a-button>
+  </a-upload>
 </template>
 
 <script setup>
+import { message } from 'ant-design-vue';
+
 const token = localStorage.getItem('access_token');
 
 const beforeUpload = (file) => {
   const isLt10M = file.size / 1024 / 1024 < 10;
   if (!isLt10M) {
-    ElMessage.error('文件大小不能超过 10MB');
+    message.error('文件大小不能超过 10MB');
   }
   return isLt10M;
 };
 
-const handleUploadSuccess = (response) => {
-  // 提交表单时保存相对路径（filePath）最稳妥
-  form.value.avatar = response.data.filePath;
+const handleUploadChange = ({ file }) => {
+  if (file.status === 'done' && file.response.code === 0) {
+    // 提交表单时保存相对路径（filePath）最稳妥
+    form.value.avatar = file.response.data.filePath;
+  }
 };
 </script>
 ```