签入版本

RXThinkCMF_ThinkPhp8_NaiveVue/zh/api-spec/upload.md

@@ -95,51 +95,65 @@ gif, jpg, jpeg, png, bmp, webp, svg
 
 ## 前端使用
 
-### Element Plus Upload 组件
+### NaiveUI 上传组件
 
 ```vue
 <template>
   <!-- 上传文件（默认 type=file） -->
-  <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>
 
   <!-- 上传图片（指定 type=image） -->
-  <el-upload
+  <n-upload
     :action="'/api/upload/uploadFile?type=image'"
-    :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleImageSuccess"
+    :headers="uploadHeaders"
     accept="image/*"
+    @change="handleImageChange"
   >
-    <el-button type="primary">上传图片</el-button>
-  </el-upload>
+    <n-button type="primary">上传图片</n-button>
+  </n-upload>
 </template>
 
 <script setup>
+import { useMessage } from 'naive-ui';
+
+const message = useMessage();
 const token = localStorage.getItem('access_token');
+const uploadHeaders = { Authorization: `Bearer ${token}` };
 
-const beforeUpload = (file) => {
-  const isLt10M = file.size / 1024 / 1024 < 10;
+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) => {
-  if (response.code === 0) {
-    form.value.file = response.data.fileUrl;
+// 上传结束，解析响应
+const parseResponse = (data) => {
+  if (data.code === 0) {
+    return data.data.fileUrl;
+  }
+  message.error(data.msg || '上传失败');
+  return null;
+};
+
+const handleUploadChange = (data) => {
+  if (data.file.status === 'finished') {
+    form.value.file = parseResponse(JSON.parse(data.file.event.target.response));
   }
 };
 
-const handleImageSuccess = (response) => {
-  if (response.code === 0) {
-    form.value.avatar = response.data.fileUrl;
+const handleImageChange = (data) => {
+  if (data.file.status === 'finished') {
+    form.value.avatar = parseResponse(JSON.parse(data.file.event.target.response));
   }
 };
 </script>
@@ -189,25 +203,19 @@ await exampleAdd({
 ```vue
 <template>
   <div class="avatar-upload">
-    <el-avatar :src="form.avatar" :size="80" />
-    <el-upload
-      :action="'/api/upload/uploadFile?type=image'"
-      :headers="{ Authorization: `Bearer ${token}` }"
-      :show-file-list="false"
-      :on-success="handleAvatarSuccess"
-      accept="image/*"
-    >
-      <el-button size="small">更换头像</el-button>
-    </el-upload>
+    <n-avatar :src="form.avatar" :size="80" />
+    <UploadImg
+      v-model:image-url="form.avatar"
+      :fileType="['image/jpeg', 'image/png', 'image/jpg', 'image/gif']"
+      :fileSize="10"
+    />
   </div>
 </template>
 
 <script setup>
-const form = ref({ avatar: '' });
+import { UploadImg } from '@/components/Upload';
 
-const handleAvatarSuccess = (response) => {
-  form.value.avatar = response.data.fileUrl;
-};
+const form = ref({ avatar: '' });
 </script>
 ```
 
@@ -234,7 +242,7 @@ BaseLogic::add()
 ```ini
 ; .env
 [FILE]
-UPLOAD_DIR = D:/uploads/rxthinkcmf      ; 上传根目录
+UPLOAD_DIR = D:\xampp8.2\htdocs\RXThinkCMF_ThinkPhp6_NaiveVue\uploads      ; 上传根目录
 DOMAIN_URL = https://cdn.example.com    ; 文件访问域名
 MAX_SIZE = 10                           ; 单文件最大 10MB
 IMAGE_EXT = jpg,jpeg,png,gif,bmp,webp,svg