一、需求

• 必须支持PDF、docx、xlsx、xls、doc等格式
• 文件上传后保存在本地文件夹
• 需要进行在线预览

二、前端代码实现

2.1 显示实现

首先我们需要添加一个用于操作的按钮上去，像这样的：

<a @click="fileRef.onOpen(record)">查看文件</a>
<a @click="ProfessionImpExpRef.onOpen(record)">上传文件</a>

2.1.1 a标签实现

2.1.1.1 上传标签实现

当用户点击上传文件时我们会在右侧打开一个抽屉，用以展示上传界面，页面部分像这样：

<ProfessionImpExp ref="ProfessionImpExpRef" />

具体逻辑像这样：

//professionImpExp.vue 为上传界面
import ProfessionImpExp from './professionImpExp.vue'
const ProfessionImpExpRef = ref()

2.1.1.2 查看标签实现

文件查看部分基本和上传部分实现类似，页面部分：

<File ref="fileRef" @successful1="table.refresh(true)" />

//file.vue为文件查看界面
import File from "./file.vue";
const fileRef = ref()
const file = ref(null)

2.2 上传文件和文件查看界面实现

2.2.1 上传文件界面

2.2.1.1 上传文件界面展示部分

当用户点击上传文件时，我们需要打开一个界面用以提示用户支持的类型和上传注意事项、上传结果，像这样的：

<template><xn-form-container title="导入导出" :width="700" :visible="visible" :destroy-on-close="true" @close="onClose"><span>导入数据格式严格按照要求进行数据录入，<b style="color: red">重复导入或使用重名文件将会覆盖之前数据内容</b></span><a-divider dashed /><div><a-spin :spinning="impUploadLoading"><a-upload-dragger :show-upload-list="false" :custom-request="customRequestLocal" :accept="uploadAccept"><p class="ant-upload-drag-icon"><inbox-outlined></inbox-outlined></p><p class="ant-upload-text">单击或拖动文件到此区域进行上传</p><p class="ant-upload-hint">仅支持PDF、docx、xlsx、xls、doc格式文件</p></a-upload-dragger></a-spin></div><a-alert v-if="impAlertStatus" type="info" :show-icon="false" banner closable @close="onImpClose" class="mt-3"><template #description><p>导入完成</p></template></a-alert></xn-form-container>
</template>

展示出来就是下面的效果：

2.2.1.1 上传文件界面逻辑部分

用户点击后，我们会打开一个抽屉，并将获取到的本行数据id传入到这个界面和上传的数据文件进行绑定，之后传回后端处理。

import { message } from 'ant-design-vue'import professionApi from '@/api/biz/professionApi'import {cloneDeep} from "lodash-es";const impUploadLoading = ref(false)const impAlertStatus = ref(false)const dataId = ref()const impAccept = [{extension: '.xls',mimeType: 'application/vnd.ms-excel'},{extension: '.xlsx',mimeType: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'},{extension: '.PDF',mimeType: 'application/pdf'},{extension: '.docx',mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'},{extension: '.doc',mimeType: 'application/msword'},]// 指定能选择的文件类型const uploadAccept = String(impAccept.map((item) => {return item.mimeType}))// 导入const customRequestLocal = (data) => {impUploadLoading.value = true// 校验上传文件扩展名和文件类型是否为支持类型const extension = '.'.concat(data.file.name.split('.').slice(-1).toString().toLowerCase())const mimeType = data.file.type// 提取允许的扩展名const extensionArr = impAccept.map((item) => item.extension)// 提取允许的MIMETypeconst mimeTypeArr = impAccept.map((item) => item.mimeType)if (!extensionArr.includes(extension) || !mimeTypeArr.includes(mimeType)) {message.warning('上传文件类型仅支持PDF、word、excel、xls、xlsx格式文件！')impUploadLoading.value = falsereturn false}const formData = new FormData();formData.append("file",data.file)formData.append("id",dataId.value.id)return professionApi.professionImport(formData).then((res) => {impAlertStatus.value = res}).finally(() => {impUploadLoading.value = false})}// 关闭导入提示const onImpClose = () => {impAlertStatus.value = false}// 定义emit事件const emit = defineEmits({ successful: null })// 默认是关闭状态let visible = ref(false)const submitLoading = ref(false)// 打开抽屉const onOpen = (record) => {visible.value = trueif (record) {let recordData = cloneDeep(record)dataId.value = Object.assign({}, recordData)}}// 关闭抽屉const onClose = () => {visible.value = false// 关闭导入的提示onImpClose()}// 调用这个函数将子组件的一些数据和方法暴露出去defineExpose({onOpen})

2.2.2 查看文件界面

2.2.2.1 查看文件界面展示部分

用户点击查看文件后，进入到这个界面进行文件查看和在线展示。

<template><xn-form-container:title="'文件详情'":width="500":visible="visible":destroy-on-close="true"@close="onClose"><a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical"><a-form-item label="文件：" name="url"><ol><li v-for="data in formData"><a :href="'http://view.officeapps.live.com/op/view.aspx?src=https://img.qcybj.com/file/'+data" target="_blank"> {{ data }}</a></li></ol></a-form-item></a-form><template #footer><a-button style="margin-right: 8px" @click="onClose">关闭</a-button></template></xn-form-container>
</template>

具体的效果类似这种：

2.2.2.2 查看文件界面逻辑部分

这部分的逻辑很简单，主要就是对后端的数据解析并绑定。

import { cloneDeep } from 'lodash-es'
import XnFormContainer from "@/components/XnFormContainer/index.vue";// 抽屉状态
const visible = ref(false)
const emit = defineEmits({ successful: null })
const file = ref()
const submitLoading = ref(false)
const formData = ref({})
// 打开抽屉
const onOpen = (record) => {visible.value = trueif (record) {let recordData = cloneDeep(record)let str = Object.assign({}, recordData).url.substr(1)let str1 = str.substring(0,str.length-1)formData.value = str1.split(",")}
}
// 关闭抽屉
const onClose = () => {visible.value = false
}
// 默认要校验的
const formRules = {
}
// 抛出函数
defineExpose({onOpen
})

2.2 其他逻辑

2.2.1 本行数据id选择逻辑

const selectedRowKeys = ref([])// 列表选择配置const options = {// columns数字类型字段加入 needTotal: true 可以勾选自动算账alert: {show: true,clear: () => {selectedRowKeys.value = ref([])}},rowSelection: {onChange: (selectedRowKey, selectedRows) => {selectedRowKeys.value = selectedRowKey}}}

2.2.2 API 逻辑

这部分内容可以参照我之前的文章，这里不再多说~

	//业务导入professionImport(data) {return request('import', data)},

三、后端实现

后端部分大多分逻辑SpringBoot + Ant Design Vue实现数据导出功能都有提及，这里不再多言。我们之说最重要的实现逻辑：

  @Transactional(rollbackFor = Exception.class)@Overridepublic String importProfession(MultipartFile file,String id ) throws IOException {Profession profession = baseMapper.selectById(id);String urlList = profession.getUrl();//定义文件名String imgName = file.getOriginalFilename();//定义上传路径String upPath = path + imgName;byte[] bytes = new byte[1024];int dataLine;try(BufferedInputStream bufferedInputStream = new BufferedInputStream(file.getInputStream());BufferedOutputStream bufferedOutputStream = new BufferedOutputStream(new FileOutputStream(upPath))){while ((dataLine=bufferedInputStream.read(bytes))!= -1){bufferedOutputStream.write(bytes, 0, dataLine);}}if(urlList == null){profession.setUrl(imgName);}else {List<String> list = Arrays.asList(urlList.split(","));List<String> arrList = new ArrayList<>(list);arrList.add(imgName);profession.setUrl(arrList.toString());}QueryWrapper<Profession> queryWrapper = new QueryWrapper<>();queryWrapper.lambda().eq(Profession::getId,id);this.update(profession,queryWrapper);return imgName;}

这里有一点需要注意，Java的IO方法很多，需要注意的是liunx系统中写入要指定绝对路径，不要用相对路径。

比如 MultipartFile 的 transferTo() 方法就可能使用相对路径。一旦使用了相对路径你就会发现原本指定写入的路径前多出了它：

/tmp/tomcat.8080.450079304707479782/work/Tomcat/localhost/ROOT