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); }