elementui中附件上传功能 el-upload 踩坑问题分析以及解决-526互联

1、Current request is not a multipart request

　　很离谱这个错误，这个错误原因是我的data写成date：

2、Required request part ‘file‘ is not present：

　　首先要知道这个错误是来自后台，通常是@RequestParam注解写的file，前台传的不是file

　　这里涉及到formData对象

　　贴上代码：

onChange(file, fileList) {
        var form = new FormData();
        // 添加键值对
        form.append("fileMessage", file.raw);
        console.log(form);
        upload(form).then(res => {
          console.log(res.data.data);
        })
}

　　正常创建的时候其实只需要把file.raw存到这个对象里就可以，这个file是来自于如下的onChange方法的参数。

　　onChange(file, fileList) {}
　然后报错中的file对应的就是fileMessage。　
所以需要 form.append("对象名",file.raw)与后台的@RequestParam("对象名")两者对应起来。
3、在使用upload的on-change的时候，会产生两次后台上传请求，这是因为

:auto-upload="false"自动上传没关
4、想一次性上传多个文件，就是通过外置按钮上传多个，可以在onchange和remove那个方法里拿到filelist，每次操作给他存到单独的表单里，然后再提交的时候

var formDataList = this.formDataList;
var formData = new FormData
for (let i = 0; i < formDataList.length; i++) {
  formData.append("fileMessage",formDataList[i].raw)
}
进行如上的循环append即可，最终后台返回结果如下，并附上后台代码

public R<Map<String,Object>> uploadFile(@RequestParam("fileMessage")MultipartFile[] fileMessages){
        Map<String,Object> map = new HashMap<>();
        int num = 0;
        try {
            for (MultipartFile fileMessage : fileMessages) {
                num++;
                InputStream inputStream = fileMessage.getInputStream();
                String fileDir = "E:\\download"+"\\";
                File fileDirectory = new File(fileDir);
                if (!fileDirectory.exists()){
                    fileDirectory.mkdirs();
                }//get一下当前文件的目录就是地址拼接一下filename
                String fileName = fileMessage.getOriginalFilename();
                StringBuilder uuid = new StringBuilder(String.valueOf(UUID.randomUUID()));
                if (fileName != null) {
                    String[] split = fileName.split("\\.");
                    uuid.append(".");
                    uuid.append(split[split.length - 1]);
                }
                File saveFile = new File(fileDirectory, String.valueOf(uuid));
                fileMessage.transferTo(saveFile);
                map.put("filename"+ num , fileName);
                map.put("fileurl" + num , saveFile);
            }

        } catch (IOException e) {
            throw new RuntimeException(e);
        }
        return  R.data(map);
    }