签入版本

RXThinkCMF_ThinkPhp8_AntdVue/zh/api-spec/upload.md

@@ -95,51 +95,56 @@ gif, jpg, jpeg, png, bmp, webp, svg
 
 ## 前端使用
 
-### Element Plus Upload 组件
+### Ant Design Upload 组件
 
 ```vue
 <template>
   <!-- 上传文件（默认 type=file） -->
-  <el-upload
+  <a-upload
     :action="'/api/upload/uploadFile'"
     :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleUploadSuccess"
     :before-upload="beforeUpload"
+    @change="handleUploadSuccess"
   >
-    <el-button type="primary">上传文件</el-button>
-  </el-upload>
+    <a-button type="primary">上传文件</a-button>
+  </a-upload>
 
   <!-- 上传图片（指定 type=image） -->
-  <el-upload
+  <a-upload
     :action="'/api/upload/uploadFile?type=image'"
     :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleImageSuccess"
     accept="image/*"
+    @change="handleImageSuccess"
   >
-    <el-button type="primary">上传图片</el-button>
-  </el-upload>
+    <a-button type="primary">上传图片</a-button>
+  </a-upload>
 </template>
 
 <script setup>
+import { message } from 'ant-design-vue';
+
 const token = localStorage.getItem('access_token');
 
+// 返回 false 阻止上传
 const beforeUpload = (file) => {
   const isLt10M = 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;
+// onChange 回调中从 file.response 取上传结果
+const handleUploadSuccess = ({ file }) => {
+  if (file.response?.code === 0) {
+    form.value.file = file.response.data.fileUrl;
   }
 };
 
-const handleImageSuccess = (response) => {
-  if (response.code === 0) {
-    form.value.avatar = response.data.fileUrl;
+const handleImageSuccess = ({ file }) => {
+  if (file.response?.code === 0) {
+    form.value.avatar = file.response.data.fileUrl;
   }
 };
 </script>
@@ -189,24 +194,26 @@ await exampleAdd({
 ```vue
 <template>
   <div class="avatar-upload">
-    <el-avatar :src="form.avatar" :size="80" />
-    <el-upload
+    <a-avatar :src="form.avatar" :size="80" />
+    <a-upload
       :action="'/api/upload/uploadFile?type=image'"
       :headers="{ Authorization: `Bearer ${token}` }"
-      :show-file-list="false"
-      :on-success="handleAvatarSuccess"
+      :show-upload-list="false"
       accept="image/*"
+      @change="handleAvatarSuccess"
     >
-      <el-button size="small">更换头像</el-button>
-    </el-upload>
+      <a-button size="small">更换头像</a-button>
+    </a-upload>
   </div>
 </template>
 
 <script setup>
 const form = ref({ avatar: '' });
 
-const handleAvatarSuccess = (response) => {
-  form.value.avatar = response.data.fileUrl;
+const handleAvatarSuccess = ({ file }) => {
+  if (file.response?.code === 0) {
+    form.value.avatar = file.response.data.fileUrl;
+  }
 };
 </script>
 ```
@@ -234,7 +241,7 @@ BaseLogic::add()
 ```ini
 ; .env
 [FILE]
-UPLOAD_DIR = D:/uploads/rxthinkcmf      ; 上传根目录
+UPLOAD_DIR = D:\xampp8.2\htdocs\RXThinkCMF_ThinkPhp8_AntdVue\uploads      ; 上传根目录
 DOMAIN_URL = https://cdn.example.com    ; 文件访问域名
 MAX_SIZE = 10                           ; 单文件最大 10MB
 IMAGE_EXT = jpg,jpeg,png,gif,bmp,webp,svg