Element-ui多文件上传只请求一次接口

本文主要是介绍Element-ui多文件上传只请求一次接口，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

页面代码

<el-upload
  :auto-upload="false"
  multiple
  class="upload-demo"
  :action="#"
  :on-change="uploadChange"
  :before-remove="beforeRemove"
  :on-remove="upLoadRemove"
  :on-preview="downLoadFile"
  :file-list="fileList">
  <el-button size="small" icon="el-icon-plus" slot="trigger">选取附件</el-button>
  <el-button style="margin-left: 10px" size="small" icon="el-icon-upload" type="success" @click="submitUpload" :disabled="fileList.length <= 0">上传到服务器</el-button>
</el-upload>

方法

beforeRemove(file, fileList) {
  return this.$confirm(`确定移除 ${file.name}？`)
},
// 移除附件
upLoadRemove(file, fileList) {
  let tempFileList = []
  for (var index = 0; index < this.fileList.length; index++) {
    if (this.fileList[index].name !== file.name) {
      tempFileList.push(this.fileList[index])
    }
  }
  this.fileList = tempFileList
},
// 监控上传文件列表
uploadChange(file, fileList) {
  let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
  if (existFile) {
    this.$message.error('当前文件已经存在!');
    fileList.pop();
  }
  this.fileList = fileList;
},
// 上传到服务器
submitUpload() {
  let formData = new FormData()
  this.fileList.forEach(item => {
    formData.append('files', item.raw)
  })
  request({
    url: '/detection/file/upload',
    method: 'post',
    data: formData
  }).then((data) => {
    if (data && data.code === 0) {
      // 消息提示
      this.$message({
        message: '文件上传成功',
        type: 'success',
        duration: 1500
      })
    } else {
      this.$message.error(data.msg)
    }
  })
},
// 点击文件进行下载
downLoadFile(file) {
  var a = document.createElement('a');
  var event = new MouseEvent('click');
  a.download = file.name;
  a.href = file.url;
  a.dispatchEvent(event);
}

springboot代码

@RequestMapping(value = "/upload", method = RequestMethod.POST)
public Results upload(@RequestParam("files") MultipartFile[] files) throws Exception {

    SimpleDateFormat sdf = new SimpleDateFormat("yyyyMMdd");
    String date = sdf.format(new Date());
    String fileName = null;
    String filePath = null;

    List<File> fileList = new ArrayList<>();
    File tmp = null;
    for(MultipartFile file : files){
        fileName = file.getOriginalFilename();

        InputStream fileIo = file.getInputStream();
        String fileType = fileName.substring(fileName.lastIndexOf(".") + 1);

        //保存到minio
        String minioName = UUID.randomUUID().toString().replace("-", "");
        filePath = "/"+date+"/" + minioName + "." + fileType;

        //udt是桶的名字
//            minioTemplate.saveObject(MinioTemplate.MINIO_BUCKET, filePath, fileIo, file.getContentType());

        tmp = new File();
        tmp.setFileName(fileName);
        tmp.setFilePath("/" + MinioTemplate.MINIO_BUCKET + filePath);
        tmp.setFileSize(String.valueOf(file.getSize()));
        tmp.setMimeType(file.getContentType());
        fileList.add(tmp);
    }

    return Results.ok("文件上传成功").put("fileList", fileList);
}

这篇关于Element-ui多文件上传只请求一次接口的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！