• 多文件上傳如迟，一個一個發(fā)到后臺
• 一次上傳多個文件

多文件上傳珊豹，一個一個發(fā)到后臺

<template>
<el-upload
  class="upload-demo"
  ref="upload"
  action="http://localhost:8080/upload"
  :on-success="success"
  :auto-upload="false"
 >
  <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務(wù)器</el-button>
  <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件，且不超過500kb</div>
</el-upload>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods: {
      submitUpload() {
        this.$refs.upload.submit();
      },
      success(res) {
        alert(res);
      }
    }
  }
</script>

<style>

</style>

后臺

@PostMapping("/upload")
public String multiUpload4Param(HttpServletRequest request,MultipartFile[] file,String id) {
    System.out.println("請求到達(dá)");
    System.out.println(id);
    //String realPath=request.getRealPath("/");
    //System.out.println(realPath);
    for(MultipartFile item:file){
        File f=new File("D:/vue/springboot-his14/static",item.getOriginalFilename());
        try {
            item.transferTo(f);
        } catch (IllegalStateException | IOException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
            return "failure";
        }
    }
    return "success";

}

一次性主傳多個文件稠鼻，并且攜帶基本信息（實用）

<template>
  <el-upload
  class="upload-demo"
  ref="upload"
  action="http://localhost:8080/upload"
  accept=".jpg,.doc,.xls,xlsx"
  :multiple=multiple
  :http-request="uploadFile"
  :auto-upload="false">
    <el-button slot="trigger" size="small" type="primary">選取文件</el-button>
    <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上傳到服務(wù)器</el-button>
    <div slot="tip" class="el-upload__tip">只能上傳jpg/png文件刃滓，且不超過500kb</div>
  </el-upload>
</template>

<script>
  export default {
    data() {
      return {
        formDate: "",//h5 的formdata
        multiple: true//是否一次性上傳多個文件
      };
    },
    methods: {
      submitUpload() {
        debugger;
        this.formDate = new FormData()
        this.$refs.upload.submit();//把file-list加到form-data列表里
        this.formDate.append('id', "12133");//普通對象
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }

        this.$axios.post("http://localhost:8080/upload", this.formDate, config)
        .then(res => {
          alert(res.data)
        })
        .catch(res => {
          console.log(res)
        })
      },

      uploadFile(file) {
        this.formDate.append('file', file.file);
      }
    }
  }
</script>

<style>

</style>