签入版本

RXThinkCMF_Laravel13_NaiveVue/zh/tools/file-components.md

@@ -1,7 +1,7 @@
 # 7.5 前端文件组件
 
 :::tip 概述
-本节介绍前端项目（独立 EleVue 仓库）中的文件处理组件，包括上传组件（BasicUpload）、富文本编辑器（Editor）与 Excel 导入导出组件的使用方法。组件封装了 [7.1 文件上传全流程](/zh/tools/upload.html) 的接口调用。
+本节介绍前端项目（独立 NaiveVue 仓库）中的文件处理组件，包括上传组件（BasicUpload）、富文本编辑器（Editor）与 Excel 导入导出组件的使用方法。组件封装了 [7.1 文件上传全流程](/zh/tools/upload.html) 的接口调用。
 :::
 
 ## Upload 上传组件
@@ -9,9 +9,11 @@
 ```vue
 <template>
   <BasicUpload
-    v-model="formData.avatar"
+    :value="formData.avatar"
     :action="uploadUrl"
-    :maxCount="1"
+    :maxNumber="1"
+    :data="{ type: 'image' }"
+    @uploadChange="handleUploadChange"
   />
 </template>
 
@@ -19,21 +21,26 @@
 import { BasicUpload } from '@/components/Upload';
 
 const uploadUrl = '/api/upload/uploadFile';
-const formData = ref({ avatar: '' });
+const formData = ref({ avatar: [] });
+
+// 上传/删除后回写文件值数组（相对路径）
+const handleUploadChange = (files) => {
+  formData.value.avatar = files;
+};
 </script>
 ```
 
 :::tip 字段值约定
-`BasicUpload` 绑定的值建议存 **`filePath`（相对路径）**——提交表单后由 Service 的 `fileFields` 归一化，读取时自动补全 `FILE_DOMAIN_URL` 域名。上传需携带 `Authorization: Bearer <token>` 请求头（组件内部或 http 封装统一处理）。
+`BasicUpload` 绑定的值（`value` 数组）建议存 **`filePath`（相对路径）**——提交表单后由 Service 的 `fileFields` 归一化，读取时自动补全 `FILE_DOMAIN_URL` 域名。上传需携带 `Authorization: Bearer <token>` 请求头（组件内部或 http 封装统一处理）。
 :::
 
 ### 常用属性
 
 | 属性 | 说明 |
 |------|------|
-| `v-model` | 绑定的文件值（相对路径） |
+| `value`（配合 `@uploadChange` 回写） | 绑定的文件值数组（相对路径） |
 | `action` | 上传接口地址（`/api/upload/uploadFile`） |
-| `maxCount` | 最大上传数量（1 = 单文件，如头像） |
+| `maxNumber` | 最大上传数量（1 = 单文件，如头像） |
 | `:data="{ type: 'image' }"` | 上传类型（image 校验图片后缀白名单，两类均存入 `temp/` 临时目录） |
 
 ## Editor 富文本编辑器
@@ -72,7 +79,7 @@ const handleImportSuccess = (data) => {
 ```
 
 :::tip 前端解析 vs 后端导入
-- **后端导入（推荐，走业务校验）**：`el-upload` 直传 `/api/{module}/import`，由 Service 逐行 `add()`（字典反查、唯一校验、事务），见 [7.4 数据导入导出](/zh/tools/excel.html)；
+- **后端导入（推荐，走业务校验）**：`n-upload` 直传 `/api/{module}/import`，由 Service 逐行 `add()`（字典反查、唯一校验、事务），见 [7.4 数据导入导出](/zh/tools/excel.html)；
 - **前端解析**：`ImportExcel` 组件用 `xlsx` 库本地解析为数组，适合导入前预览、无业务校验的场景。
 :::