element-ui 中 el-upload 多文件一次性上传的实现

参考文章： https://www.jb51.net/article/201156.htm

JAVA端能够接收到VUE传递的文件列表参数。进行上传处理，再返回文件地址列表。

自己记录学习，直接上代码：

vue页面

复制代码

        <div class="upload-file">
          <el-upload
            accept="image/png, image/jpeg"
            ref="uploadBatch"
            multiple
            :limit="5"
            :on-exceed="handleExceed"
            list-type="picture"
            action="#"
            :on-preview="handlePreview"
            :on-change="handleChange"
            :on-remove="handleRemove"
            :file-list="fileList"
            :http-request="uploadFile"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 133px;" size="small" type="success" @click="submitUpload">上传到服务器
            </el-button>
            <div slot="tip" class="el-upload__tip">只能上传图片文件，且不超过 5M</div>
          </el-upload>
        </div>

js变量定义

复制代码

      fileData: '', // 文件上传数据（多文件合一）
      fileList: [],  // upload多文件数组

js代码

复制代码

    // 上传文件 添加到 form文件中
    uploadFile(file) {
      console.log(file)
      console.log(file.file)
      this.fileData.append('urlfiles', file.file); // append增加数据
    },

    // 上传到服务器 手动上传
    submitUpload() {
      if (this.fileList.length === 0) {
        this.$message({
          message: '请先选择文件',
          type: 'warning'
        })
      } else {
        const isLt100M = this.fileList.every(file => file.size / 1024 / 1024 < 5);
        if (!isLt100M) {
          this.$modal.msgError('请检查，上传文件大小不能超过5MB!')
        } else {
          this.fileData = new FormData(); // new formData对象
          this.$refs.uploadBatch.submit(); // 提交调用uploadFile函数
          uploadBatchUrl(this.fileData).then((response) => {
            if(response.code == "200") {
              this.$modal.msgSuccess("上传成功")
              this.fileList = [];
              console.log(response.data)
            } else {
              this.$modal.msgError(response.msg)
            }
          });
        }
      }
    },

    //移除 图片
    handleRemove(file, fileList) {
      this.fileList = fileList;
      // return this.$confirm(`确定移除 ${ file.name }？`);
    },

    // 选取文件超过数量提示
    handleExceed(files, fileList) {
      this.$modal.msgWarning(`当前限制选择 6 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },

    //监控上传文件列表
    handleChange(file, fileList) {
      let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
      if (existFile) {
        this.$modal.msgError('当前文件已经存在!')
        fileList.pop();
      }
      this.fileList = fileList;
    },

    handlePreview(file) {
      console.log(file);
      // this.dialogImageUrl = file.url;
      // this.dialogVisible = true;

      window.open(file.url, '_blank');
    }

java代码 SpringBoot

复制代码

    /**
     * 拜访沟通佐证图片 批量多文件上传
     */
    @Log(title = "拜访沟通佐证图片", businessType = BusinessType.UPDATE)
    @ApiImplicitParam(name = "files",value = "文件",dataType = "MultipartFile",allowMultiple = true)
    @PostMapping("/uploadBatch")
    public AjaxResult uploadBatch(@RequestParam("urlfiles") List<MultipartFile> files) throws Exception
    {
        log.info("uploadBatch-begin");
        log.info(String.valueOf(files.size()));

        List<TUserOrderVisitImages> list=new ArrayList<TUserOrderVisitImages>();
        if  (!files.isEmpty()) {

            for(MultipartFile file : files) {
                log.info(file.getName());
                if (!file.isEmpty())
                {
                    String avatar = FileUploadUtils.upload(RuoYiConfig.getAvatarPath(), file, MimeTypeUtils.IMAGE_EXTENSION, true);
                    TUserOrderVisitImages  tUserOrderVisitImages = new TUserOrderVisitImages();
                    tUserOrderVisitImages.setImagesUrl(avatar);
                    list.add(tUserOrderVisitImages);

                }
            }
            return AjaxResult.success(list);
        } else {
            return AjaxResult.success();
        }

    }