优化更新

DjangoAdmin_FastAPI_AntdVue/zh/volume4/tools/upload-guide.md

@@ -27,7 +27,7 @@
 |:----|:----|:----|
 | `UPLOAD_ALLOWED_EXTS` | `.jpg,.jpeg,.png,.gif,...,.zip` | 允许上传的文件扩展名（逗号分隔，带点号） |
 | `UPLOAD_MAX_SIZE_MB` | `10` | 上传文件大小上限（MB） |
-| `FASTAPI_FILE_URL` | `http://file.fastapi.elevue` | 文件访问域名 |
+| `FASTAPI_FILE_URL` | `http://file.fastapi.antdvue` | 文件访问域名 |
 | `FASTAPI_UPLOAD_DIR` | `uploads` | 上传文件存储目录 |
 
 ## 上传接口
@@ -173,19 +173,20 @@ Service 层的 `BaseService._enrich_file_urls()` 会自动为文件字段补此
 
 ```vue
 <template>
-  <el-upload
+  <a-upload
     :action="uploadUrl"
     :headers="headers"
-    :on-success="handleSuccess"
+    @change="handleChange"
     :before-upload="beforeUpload"
   >
-    <el-button type="primary">上传文件</el-button>
-  </el-upload>
+    <a-button type="primary">上传文件</a-button>
+  </a-upload>
 </template>
 
 <script setup>
 import { ref } from 'vue';
 import { useUserStore } from '@/store/modules/user';
+import { message } from 'ant-design-vue';
 
 const uploadUrl = '/api/v1/upload/uploadFile';
 const userStore = useUserStore();
@@ -196,15 +197,18 @@ const headers = {
 function beforeUpload(file) {
     const isLt10M = file.size / 1024 / 1024 < 10;
     if (!isLt10M) {
-        ElMessage.error('文件大小不能超过 10MB');
+        message.error('文件大小不能超过 10MB');
     }
     return isLt10M;
 }
 
-function handleSuccess(response) {
-    if (response.code === 0) {
-        // 保存 fileUrl 到业务字段
-        form.value.cover = response.data.fileUrl;
+function handleChange(info) {
+    if (info.file.status === 'done') {
+        const response = info.file.response;
+        if (response.code === 0) {
+            // 保存 fileUrl 到业务字段
+            form.value.cover = response.data.fileUrl;
+        }
     }
 }
 </script>
@@ -214,12 +218,13 @@ function handleSuccess(response) {
 
 ```vue
 <template>
-  <el-image
+  <a-image
     v-if="form.cover"
     :src="getFileUrl(form.cover)"
-    :preview-src-list="[getFileUrl(form.cover)]"
+    :preview="{ src: getFileUrl(form.cover) }"
+    :width="100"
+    :height="100"
     fit="cover"
-    style="width: 100px; height: 100px"
   />
 </template>