签入版本

EasyGoAdmin_Beego_NaiveVue/zh/tools/file-components.md

@@ -0,0 +1,72 @@
+# 7.5 前端文件组件
+
+:::tip 概述
+本节介绍前端项目中的文件处理组件，包括上传组件（BasicUpload）和图片预览组件的使用方法。
+:::
+
+## Upload 上传组件
+
+```vue
+<template>
+  <BasicUpload
+    v-model="formData.avatar"
+    :action="uploadUrl"
+    :maxCount="1"
+  />
+</template>
+
+<script setup>
+import { BasicUpload } from '@/components/Upload';
+
+const uploadUrl = '/api/upload/uploadFile';
+const formData = ref({ avatar: '' });
+</script>
+```
+
+## Editor 富文本编辑器
+
+```vue
+<template>
+  <Editor v-model="formData.content" />
+</template>
+
+<script setup>
+import Editor from '@/components/Editor/index.vue';
+
+const formData = ref({ content: '' });
+</script>
+```
+
+## Excel 导入组件
+
+```vue
+<template>
+  <ImportExcel @success="handleImportSuccess" />
+</template>
+
+<script setup>
+import ImportExcel from '@/components/Excel/src/ImportExcel.vue';
+
+const handleImportSuccess = (data) => {
+  // data 为解析后的数组
+  console.log(data);
+};
+</script>
+```
+
+## Excel 导出
+
+```typescript
+import { jsonToSheetXlsx } from '@/components/Excel/src/Export2Excel';
+
+// 导出 Excel
+jsonToSheetXlsx({
+  data: tableData.value,
+  header: {
+    name: '名称',
+    statusText: '状态',
+    createTime: '创建时间',
+  },
+  filename: '导出数据.xlsx',
+});
+```