# 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',
});
```