签入版本

RXThinkCMF_ThinkPhp8_NaiveVue/zh/tools/upload.md

@@ -363,35 +363,46 @@ file: <二进制图片>
 
 ## 前端集成
 
-### Element Plus 上传组件
+### NaiveUI 上传组件
 
 ```vue
 <template>
-  <el-upload
+  <n-upload
     :action="'/api/upload/uploadFile'"
-    :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleUploadSuccess"
-    :before-upload="beforeUpload"
+    :headers="uploadHeaders"
+    @before-upload="beforeUpload"
+    @change="handleUploadChange"
   >
-    <el-button type="primary">上传文件</el-button>
-  </el-upload>
+    <n-button type="primary">上传文件</n-button>
+  </n-upload>
 </template>
 
 <script setup>
-const token = localStorage.getItem('access_token');
+import { useMessage } from 'naive-ui';
 
-const beforeUpload = (file) => {
-  const isLt10M = file.size / 1024 / 1024 < 10;
+const message = useMessage();
+const token = localStorage.getItem('access_token');
+const uploadHeaders = { Authorization: `Bearer ${token}` };
+
+const beforeUpload = ({ file }) => {
+  const isLt10M = file.file.size / 1024 / 1024 < 10;
   if (!isLt10M) {
-    ElMessage.error('文件大小不能超过 10MB');
+    message.error('文件大小不能超过 10MB');
+    return false;
   }
-  return isLt10M;
+  return true;
 };
 
-const handleUploadSuccess = (response) => {
-  // response.data.fileUrl 是完整 URL
-  // 提交表单时使用此 URL
-  form.value.avatar = response.data.fileUrl;
+const handleUploadChange = (data) => {
+  if (data.file.status === 'finished') {
+    const res = JSON.parse(data.file.event.target.response);
+    if (res.code === 0) {
+      // res.data.fileUrl 是完整 URL，提交表单时使用此 URL
+      form.value.avatar = res.data.fileUrl;
+    } else {
+      message.error(res.msg || '上传失败');
+    }
+  }
 };
 </script>
 ```