签入版本

RXThinkCMF_Laravel13_NaiveVue/zh/tools/upload.md

@@ -247,33 +247,40 @@ function save_remote_file(string $url, string $saveDir = ''): string|false
 
 ## 前端集成
 
-### Element Plus 上传组件
+### NaiveUI 上传组件
 
 ```vue
 <template>
-  <el-upload
+  <n-upload
     :action="'/api/upload/uploadFile'"
     :data="{ type: 'image' }"
-    :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleUploadSuccess"
-    :before-upload="beforeUpload"
+    :headers="uploadHeaders"
+    @before-upload="beforeUpload"
+    @finish="handleUploadFinish"
   >
-    <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 '@/hooks/web/useMessage';
 
-const beforeUpload = (file) => {
-  const isLt10M = file.size / 1024 / 1024 < 10;
+const $message = useMessage();
+const token = localStorage.getItem('access_token');
+const uploadHeaders = { Authorization: `Bearer ${token}` };
+
+// n-upload 的 before-upload 参数为 { file }，原生文件对象在 file.file
+const beforeUpload = ({ file }) => {
+  const isLt10M = file.file.size / 1024 / 1024 < 10;
   if (!isLt10M) {
-    ElMessage.error('文件大小不能超过 10MB');
+    $message.error('文件大小不能超过 10MB');
   }
   return isLt10M;
 };
 
-const handleUploadSuccess = (response) => {
+// 上传结束，finish 事件拿到原始 event，需自行解析响应
+const handleUploadFinish = ({ event }) => {
+  const response = JSON.parse(event.target.response);
   // 提交表单时保存相对路径（filePath）最稳妥
   form.value.avatar = response.data.filePath;
 };