优化更新

DjangoAdmin_FastAPI_NaiveVue/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.naivevue` | 文件访问域名 |
 | `FASTAPI_UPLOAD_DIR` | `uploads` | 上传文件存储目录 |
 
 ## 上传接口
@@ -173,20 +173,22 @@ Service 层的 `BaseService._enrich_file_urls()` 会自动为文件字段补此
 
 ```vue
 <template>
-  <el-upload
+  <n-upload
     :action="uploadUrl"
     :headers="headers"
     :on-success="handleSuccess"
     :before-upload="beforeUpload"
   >
-    <el-button type="primary">上传文件</el-button>
-  </el-upload>
+    <n-button type="primary">上传文件</n-button>
+  </n-upload>
 </template>
 
 <script setup>
 import { ref } from 'vue';
+import { useMessage } from 'naive-ui';
 import { useUserStore } from '@/store/modules/user';
 
+const message = useMessage();
 const uploadUrl = '/api/v1/upload/uploadFile';
 const userStore = useUserStore();
 const headers = {
@@ -194,9 +196,9 @@ const headers = {
 };
 
 function beforeUpload(file) {
-    const isLt10M = file.size / 1024 / 1024 < 10;
+    const isLt10M = file.file.size / 1024 / 1024 < 10;
     if (!isLt10M) {
-        ElMessage.error('文件大小不能超过 10MB');
+        message.error('文件大小不能超过 10MB');
     }
     return isLt10M;
 }
@@ -214,12 +216,13 @@ function handleSuccess(response) {
 
 ```vue
 <template>
-  <el-image
+  <n-image
     v-if="form.cover"
     :src="getFileUrl(form.cover)"
-    :preview-src-list="[getFileUrl(form.cover)]"
-    fit="cover"
-    style="width: 100px; height: 100px"
+    :preview-src="getFileUrl(form.cover)"
+    object-fit="cover"
+    width="100"
+    height="100"
   />
 </template>