一、需求分析
将 Email 文件、Word 文件、PDF文件拖到文件上传列表中,然后点击确认翻译,将所有的文件同时上传,并由后端同时接收,之后将翻译文件地址返回给前端。
遇到问题:Element-UI 组件不能够同时上传多个文件,以及Java后端接口如何接收问题。
解决方法:可以借助 FormData 对象进行解决, Java接口使用 @RequestPart 来进行完成。
二、解决方案
(1) vue template 部分代码实现:
<template>
<div class="app-container">
<el-upload
class="upload-component"
ref="upload"
:auto-upload="false"
:file-list="fileList"
:on-change="onChange"
:on-remove="onRemove"
:limit="20"
action=""
multiple
drag
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">请上传 eml文件, word文件, pdf文件</div>
</el-upload>
<div class="operation-button">
<el-button type="primary" size="mini" @click="confirmSubmit" :loading="loading">{{this.loading ? '正在翻译中, 请不要关闭' : '确认翻译'}}</el-button>
<el-button type="danger" size="mini" @click="clearFile">清空文件</el-button>
</div>
</div>
</template>
(2) vue script 部分代码实现:
onChange(file, fileList) {
// valid the suffix of file
let validSuffix = ['pdf', `docx`, `doc`, 'eml']
let splits = file.name.split('.')
let suffix = splits[splits.length - 1]
if (!validSuffix.includes(suffix)) {
this.$message.error(`只能上传 ${validSuffix.join(',')} 类型的文件!`)
this.fileList = fileList.filter(item => item.uid !== file.uid)
return
}
this.fileList = fileList
},
onRemove(file, fileList) {
this.fileList = fileList.filter(item => item.uid !== file.uid)
},
clearFile() {
this.fileList = []
},
confirmSubmit() {
//判断是否有文件再上传
if (this.fileList.length === 0) {
return this.$message.warning('请选取文件后再上传')
}
// 创建 formData 对象
const formData = new FormData()
// 将所有 的 upload 组件中的文件对象放入到 FormData 对象中
this.fileList.forEach((file) => {
formData.append('files', file.raw)
})
//自定义的接口也可以用ajax或者自己封装的接口
this.loading = true
request({
method: 'POST',
url: '/uploadEmailFiles',
data: formData
}).then(({code, data}) => {
if (code === '10001') {
this.$message.success('翻译成功')
// 打开页面直接下载zip文件
window.open(getBaseUrl() + data)
} else {
this.$message.error('翻译失败')
}
//清空fileList
this.fileList = []
this.loading = false
}).catch(() => {
this.loading = false
this.$message.error('翻译失败')
})
}
(3) Java 后端接口的实现
@PostMapping("/uploadEmailFiles")
public Result uploadEmailFiles(@RequestPart MultipartFile[] files) {
//region 将所要上传的 email 文件上传到指定的目录( uploadFolder ), 拆解 email 文件为目录的形式到 ( visitFolder )
// 创建文件
// 这一批文件需要一个文件夹来存放 (该字段为文件夹名称)
String srcAndDestDirectory = UUID.randomUUID().toString().replace("-", "");
// source
File uploadFolderFile = new File(uploadFolder);
if (!uploadFolderFile.exists()) {
boolean creatFolder = uploadFolderFile.mkdir();
if (creatFolder) {
log.debug("创建uploadSrc文件成功");
}
}
// target
File visitFolderFile = new File(visitFolder);
if (!visitFolderFile.exists()) {
boolean creatFolder = visitFolderFile.mkdir();
if (creatFolder) {
log.debug("创建visitSrc文件成功");
}
}
// src/srcAndDestDirectory
File emailUploadFolder = new File(uploadFolder, srcAndDestDirectory);
if (!emailUploadFolder.exists()) {
boolean creatFolder = emailUploadFolder.mkdir();
if (creatFolder) {
log.debug("创建src子文件成功");
}
}
// target/srcAndDestDirectory
File emailVisitFolder = new File(visitFolder, srcAndDestDirectory);
if (!emailVisitFolder.exists()) {
boolean creatFolder = emailVisitFolder.mkdir();
if (creatFolder) {
log.debug("创建src子文件成功");
}
}
// 所需翻译文件 -> src/srcAndDestDirectory
Stream.of(files).forEach(item -> {
try {
String originalFilename = item.getOriginalFilename();
if (originalFilename != null) {
item.transferTo(new File(emailUploadFolder, originalFilename));
}
} catch (IOException e) {
log.debug("创建 email 文件失败");
}
});
//endregion
// 获取 src/文件夹(1)文件夹下的 所有的 .email文件进行解析(解析文本(保存在内存),创建 dest/文件夹(1) 用来保存原始文本,所有附件)
WriteToDest transformUtil = new WriteToDest();
String emailUploadFolderAbsolutePath = emailUploadFolder.getAbsolutePath();
String emailVisitFolderAbsolutePath = emailVisitFolder.getAbsolutePath();
// 解析所有 email 并且 翻译原文(不包含附件)
transformUtil.writeSourceToDestByWord(emailUploadFolderAbsolutePath, emailVisitFolderAbsolutePath, new ArrayList<>(), new HashMap(1));
// 对解析出的 .email 文件以及 dest/文件夹(1)下的附件 进行翻译
// 翻译附件中的 pdf 和 word 文档 (以及上传的PDF 和 Word)
transformUtil.translateAndWriteToFolderAllAttachment(emailVisitFolderAbsolutePath);
// 每个 .email 文件对应一个文件夹(1)
// 每个 email 文件夹 包含一个 一个原文本文件和原文本文件的翻译文件,附件文件:附件文件夹中有所有的附件文件以及附件对应的翻译文件
// 打包翻译完成的文件, 并且返回给前端路径
try {
ZipUtils.generateFile(emailVisitFolderAbsolutePath, ZIP);
} catch (Exception e) {
log.debug("打包文件异常");
}
// 返回结果
return Result.success(staticAccessPath + srcAndDestDirectory + "." + ZIP);
}
三、实现效果
上传文件点击翻译按钮,文件开始翻译,翻译完成后直接返回zip文件,进行下载。
如果对您有帮助请点赞 + 收藏 + 关注。