import{_ as i,o as a,c as n,a2 as t}from"./chunks/framework.B-QBKwc1.js";const g=JSON.parse('{"title":"前端文件组件","description":"本节介绍前端项目中的文件处理组件，包括上传组件（BasicUpload）和图片预览组件的使用方法。","frontmatter":{},"headers":[],"relativePath":"zh/tools/file-components.md","filePath":"zh/tools/file-components.md"}'),h={name:"zh/tools/file-components.md"};function l(k,s,p,e,F,r){return a(),n("div",null,[...s[0]||(s[0]=[t(`

7.5 前端文件组件 ​

概述

本节介绍前端项目中的文件处理组件，包括上传组件（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',
});
`,10)])])}const y=i(h,[["render",l]]);export{g as __pageData,y as default};