表单中上传附件功能

问题：

• 原本是一个普通的提交表单功能，但是要增加一个上传附件的功能，我就随便找了个 element-ui 的上传组件，后端 dto 增加一个 MultipartFIle 类型的字段来接受文件，结果就开始各种错误

解决

• 首先是可能的问题就是你的 dto 前面有 @RequestBody 注解，把他去掉，然后前端本来直接提交的表单数据换掉

• //表单中的上传组件
  
      
        选取文件
      
  
  
  //methods 中的上传文件的方法
  uploadFile (file) {
    this.dataForm.file = file
  },
  
  
  //将原本的表单数据改造成FormData类型的数据
  let formData = new FormData()
    for (let i in this.dataForm) {
      if (i === 'id' && this.dataForm[i] == null) {
      } else {
          formData.append(i, this.dataForm[i])
        }
    }
  
  //调取后端接口的方法就根据项目封装的方式来了，此处省略

• 后端接受的参数改为：

• public Result save(xxxDTO dto,@RequestParam(value="file" ,required=false) MultipartFile file){
  
  }

•  去掉 DTO 的 MultipartFile 类型字段

 总结

• 还有这个报错：Content type ‘multipart/form-data；boundary，我在 中加了：enctype="multipart/form-data"，但是不加好像也没影响，好像是给原生

  表单用的

• 最初我使用 @RequesrBody 注解加在 DTO 前面时，此时 DTO 有 MultipartFile 类型字段，我封装前端数据调试也发现要传给后端的数据没问题，但是一到后端还没进方法就报错“DTO["files"]->java.lang.Object[][0]”，所以去掉了该注解，但是去掉该注解后你就得上传 FormData 类型的数据，所以重新封装了一下
• 如果在 DTO 中加入 MultipartFile 类型的字段，他是默认不为空的，你不上传附件，提交表单时就报错“on field 'files': rejected value [[object File]]”，所以去掉该字段改为在传参中加 @RequestParam(value="file" ,required=false)，则提交表单时不上传附件也不会报错