72 lines
1.3 KiB
Markdown
72 lines
1.3 KiB
Markdown
# 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',
|
|
});
|
|
``` |