签入版本

RXThinkCMF_Laravel13_AntdVue/zh/api-spec/upload.md

@@ -32,7 +32,7 @@
     "ok": true,
     "msg": "上传成功",
     "data": {
-        "fileUrl": "http://localhost:8000/uploads/temp/20261002/123456_a1b2c3d4e5f6.jpg",
+        "fileUrl": "http://admin.laravel13.antdvue/uploads/temp/20261002/123456_a1b2c3d4e5f6.jpg",
         "filePath": "temp/20261002/123456_a1b2c3d4e5f6.jpg",
         "originalName": "photo.jpg",
         "fileSize": 102400,
@@ -47,7 +47,7 @@
 
 | 字段 | 类型 | 说明 | 示例 |
 |------|------|------|------|
-| `fileUrl` | string | 可访问 URL（`FILE_DOMAIN_URL` 为空时等于相对路径） | `http://localhost:8000/uploads/temp/...` |
+| `fileUrl` | string | 可访问 URL（`FILE_DOMAIN_URL` 为空时等于相对路径） | `http://admin.laravel13.antdvue/uploads/temp/...` |
 | `filePath` | string | 相对存储路径（**提交表单建议用此字段**） | `temp/20261002/123456_a1b2....jpg` |
 | `originalName` | string | 原始文件名 | `photo.jpg` |
 | `fileSize` | number | 文件大小（字节） | `102400` |
@@ -102,52 +102,56 @@ gif, jpg, jpeg, png, bmp, webp
 
 ## 前端使用
 
-### Element Plus Upload 组件
+### AntDesign Upload 组件
 
 ```vue
 <template>
   <!-- 上传文件（默认 type=file） -->
-  <el-upload
+  <a-upload
     :action="'/api/upload/uploadFile'"
     :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleUploadSuccess"
     :before-upload="beforeUpload"
+    :show-upload-list="false"
+    @change="handleUploadChange"
   >
-    <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'"
     :data="{ type: 'image' }"
     :headers="{ Authorization: `Bearer ${token}` }"
-    :on-success="handleImageSuccess"
+    :show-upload-list="false"
     accept="image/*"
+    @change="handleImageChange"
   >
-    <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');
 
 const beforeUpload = (file) => {
   const isLt10M = file.size / 1024 / 1024 < 10;
   if (!isLt10M) {
-    ElMessage.error('文件大小不能超过 10MB');
+    message.error('文件大小不能超过 10MB');
   }
   return isLt10M;
 };
 
-const handleUploadSuccess = (response) => {
-  if (response.code === 0) {
-    form.value.file = response.data.filePath;   // 建议存相对路径
+const handleUploadChange = ({ file }) => {
+  if (file.status === 'done' && file.response.code === 0) {
+    form.value.file = file.response.data.filePath;   // 建议存相对路径
   }
 };
 
-const handleImageSuccess = (response) => {
-  if (response.code === 0) {
-    form.value.avatar = response.data.filePath;
+const handleImageChange = ({ file }) => {
+  if (file.status === 'done' && file.response.code === 0) {
+    form.value.avatar = file.response.data.filePath;
   }
 };
 </script>
@@ -167,7 +171,7 @@ const res = await http.request({
     headers: { 'Content-Type': 'multipart/form-data' },
 });
 // res.filePath = "temp/20261002/123456_a1b2....jpg"
-// res.fileUrl  = "http://localhost:8000/uploads/temp/20261002/..."
+// res.fileUrl  = "http://admin.laravel13.antdvue/uploads/temp/20261002/..."
 
 // 上传图片（指定 type=image）
 const res2 = await http.request({
@@ -199,25 +203,25 @@ 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="handleAvatarChange"
     >
-      <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) => {
-  if (response.code === 0) {
-    form.value.avatar = response.data.filePath;
+const handleAvatarChange = ({ file }) => {
+  if (file.status === 'done' && file.response.code === 0) {
+    form.value.avatar = file.response.data.filePath;
   }
 };
 </script>