elementUI多文件表单上传

使用中发现这个多文件上传，是分批的单文件上传
不用调用on-change

<el-form-item label="上传文件" :label-width="formLabelWidth">
      <el-upload ref="uploadDemo" action="/api/uploadWithForm" :on-change="addImg" :data="upData" :auto-upload="false" :file-list="fileList">
      <!-- <el-upload ref="uploadDemo" action="/api/mulUploadWithForm" :on-change="addImg" :data="upData" :auto-upload="false" :file-list="fileList"> -->
        <el-button size="small" type="primary" multiple>选择文件</el-button>
      </el-upload>
</el-form-item>

参数	说明	类型
data	上传时附带的额外参数	object
on-change	文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用	function(file, fileList)
auto-upload	是否在选取文件后立即进行上传	boolean
file-list	上传的文件列表, 例如: [{name: 'food.jpg', url: 'https://xxx.cdn.com/xxx.jpg'}]	array

后端接口
一开始用这个,发现进不去循环，并且发现上传了几张图就会访问几次接口

 @RequestMapping(value = "mulUploadWithForm", method = RequestMethod.POST)
    public String mulUploadWithForm(MultipartFile[] files, User user){
        for (int i=0; i<files.length; i++) {
            MultipartFile multipartFile = files[i];
            try {
                multipartFile.transferTo(new File(filePath ));
            }catch (Exception e){
                e.printStackTrace();
                return "上传失败";
            }
        }
        return user.toString();
    }

然后改用这个接口

@RequestMapping(value = "uploadWithForm", method = RequestMethod.POST)
    public String mulUploadWithForm(MultipartFile file, User user){
            try {
                String filename = file.getOriginalFilename();
                file.transferTo(new File(filePath + filename));
            }catch (Exception e){
                e.printStackTrace();
                return "上传失败";
            }
        return user.toString();
    }

前端完整代码：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="年龄" prop="age">
      <el-input v-model="form.age"></el-input>
    </el-form-item>
    <el-form-item label="姓名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="上传文件" :label-width="formLabelWidth">
      <el-upload ref="uploadDemo" action="/api/uploadWithForm" :on-change="addImg" :data="upData" :auto-upload="false" :file-list="fileList">
      <!-- <el-upload ref="uploadDemo" action="/api/mulUploadWithForm" :on-change="addImg" :data="upData" :auto-upload="false" :file-list="fileList"> -->
        <el-button size="small" type="primary" multiple>选择文件</el-button>
      </el-upload>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">上传表单</el-button>
      <el-button>取消</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  computed: {
    // 这里定义上传文件时携带的参数，即表单数据
    upData: function() {
      return this.form
    }
  },
  data() {
    return {
      formLabelWidth: '80px',
      form: {
        username: '',
        age: ''
      },
      fileList: []
    }
  },
  methods: {
    onSubmit() {
      this.$refs.uploadDemo.submit()
    },
    addImg(file, fileList) {
      console.log(this.fileList)
    }
  }
}
</script>

后端完整代码

@RestController
@CrossOrigin
public class MulUploadController {

    @Value("${filepath}")
    public String filePath;

    @RequestMapping(value = "mulUploadWithForm", method = RequestMethod.POST)
    public String mulUploadWithForm(MultipartFile[] files, User user){
        for (int i=0; i<files.length; i++) {
            MultipartFile multipartFile = files[i];
            try {
                multipartFile.transferTo(new File(filePath ));
            }catch (Exception e){
                e.printStackTrace();
                return "上传失败";
            }
        }
        return user.toString();
    }

    @RequestMapping(value = "uploadWithForm", method = RequestMethod.POST)
    public String mulUploadWithForm(MultipartFile file, User user){
            try {
                String filename = file.getOriginalFilename();
                file.transferTo(new File(filePath + filename));
            }catch (Exception e){
                e.printStackTrace();
                return "上传失败";
            }
        return user.toString();
    }
}