表单中上传附件功能

李牧九丶

已于 2022-03-10 16:34:55 修改

阅读量2.2k

点赞数

文章标签：前端 javascript java 后端

于 2022-03-10 16:32:48 首次发布

本文链接：https://blog.youkuaiyun.com/m0_53256503/article/details/123404053

版权

本文详细阐述如何在Element-UI表单中整合上传附件功能，并解决前后端数据类型转换及MultipartFile接收问题，包括去除@RequestBody注解、FormData封装和@RequestParam处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

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

解决

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

//表单中的上传组件
<el-form-item
    label="文件上传"
    prop="file">
    <el-upload
      :before-upload="uploadFile"
      action="https://jsonplaceholder.typicode.com/posts/"
      v-model="dataForm.file">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
    </el-upload>
</el-form-item>

//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，我在 <el-form> 中加了：enctype="multipart/form-data"，但是不加好像也没影响，好像是给原生<form>表单用的
最初我使用 @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)，则提交表单时不上传附件也不会报错