文件上传

• 多文件上传，一个一个发到后台
• 一次上传多个文件

多文件上传，一个一个发到后台

<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">上传到服务器</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("请求到达");
    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">上传到服务器</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>