Element-UI + SpringBoot + FormData 实现多文件同时上传

一、需求分析

将 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文件，进行下载。
如果对您有帮助请点赞 + 收藏 + 关注。