Ant Design Vue和VUE3下的upload组件使用以及文件预览

Ant Design Vue和VUE3下的upload组件使用以及文件预览

用到技术：Ant Design Vue、VUE3、xlsx的文件预览功能（也可预览txt，csv）

一、多文件上传

1.需求

1. 可以多文件上传
2. 文件先上传到本地，点击开始上传再通过后端接口继续上传
3. 上传后显示全部、正确和错误的数据信息
4. 上传后可以下载

注意细节：

1. 最开始文件上传到本地时，右边页面不加载，当点击上传后，在右边未获取数据之前，
   a.上传组件无法再次上传;
   b:右边数据均处于加载中状态；
   c.文件下载处于不可编辑状态
2. 加载出数据后，
   a.上传组件可再次上传;
   b.文件预览中的全部、正确和错误数据均需显示出对应的数据序号
   c.正确和错误的数据，均不显示‘比对结果’，仅全部数据显示
3. 文件下载接口注意文件类型为‘blob’

2.样例

3.代码

<template>
	<a-row :gutter="8">
		<a-col :span="8">
			<a-card title="文件上传">
				<a-upload-dragger
					v-model:fileList="fileList"
					name="files"
					accept=".txt"
					:multiple="true"
					:action="action"
					:before-upload="beforeUpload"
					:disabled="upLoadDisabled"
					@remove="handleRemove"
					:showUploadList="{
   
						showRemoveIcon: true
					}"
				>
					<p class="ant-upload-drag-icon">
						<inbox-outlined></inbox-outlined>
					</p>
					<p class="ant-upload-text">点击或将文件拖拽到这里上传, 支持扩展名：.txt</p>
				</a-upload-dragger>
				<div style="text-align: right">
					<a-button
						type="primary"
						:disabled="fileList.length === 0"
						:loading="uploading"
						style="margin-top: 16px"
						@click="handleUpload"
					>
						{
   {
    uploading ? '上传中' : '开始上传' }}
					</a-button>
				</div>
			</a-card>
		</a-col>
		<a-col :span="16">
			<a-card>
				<a-spin :spinning="upLoadSpinning" tip="数据加载中...">
					<a-row :gutter="16">
						<a-col :span="12">
							<a-statistic title="正确/错误(个)" :value="trueNum" class="demo-class">
								<template #suffix>
									<span>/{
   {
    falseNum }}</span>
								</template>
							</a-statistic>
						</a-col>
						<a-col :span="12">
							<a-statistic title="完善度" :value="wcdPercent" style="margin-right: 50px" />
						</a-col>
					</a-row>
				</a-spin>
			</a-card>
			<a-card title="文件预览" style="margin-top: 5px">
				<a-spin :spinning="upLoadSpinning" tip="数据加载中...">
					<a-tabs v-model:activeKey="activeKey" type="card" @change="tabChange">
						<a-tab-pane key="0">
							<template #tab>
								<div>全部</div>
							</template>
							<div style="padding-bottom: 20px; padding-top: 20px">
								<div v-if="tableData0.length > 0">
									<a-table :columns="columns" :data-source="tableData0" bordered> </a-table>
								</div>
								<div v-else>
									<div class="emptyStyle"></div>
								</div>
							</div>
						</a-tab-pane>
						<a-tab-pane key="1">
							<template #tab>
								<div>正确</div>
							</template>
							<div style="padding-bottom: 20px; padding-top: 20px">
								<div v-if="tableData1.length > 0">
									<a-table :columns="columns1" :data-source="tableData1" bordered> </a-table>
								</div>
								<div v-else>
									<div class="emptyStyle"></div>
								</div>
							</div>
						</a-tab-pane>
						<a-tab-pane key="2">
							<template #tab>
								<div>错误</div>
							</template>
							<div style="padding-bottom: 20px; padding-top: 20px">
								<div v-if="tableData2.length > 0">
									<a-table :columns="columns1" :data-source="tableData2" bordered> </a-table>
								</div>
								<div v-else>
									<div class="emptyStyle"></div>
								</div>
							</div>
						</a-tab-pane>
						<template #rightExtra>
							<a-button @click="fileDownloadBtn" type="primary" :disabled="fileDownload">文件下载</a-button>
						</template>
					</a-tabs>
				</a-spin>
			</a-card>
		</a-col>
	</a-row>
</template>

<script setup>
	import {
    message } from 'ant-design-vue'
	import sysConfig from '@/config'
	import uploadApi from '@/api/auth/uploadApi'
	import * as XLSX from 'xlsx'
	import {
    clone } from 'lodash-es'
	import fileApi from '@/api/dev/fileApi'
	const props = defineProps({