一、问题及其原因
环境准备:Vue3+Element-Plus+SpringBoot3+axios
在我的毕设中出现了这样一个问题,使用原生的form标签或者PostMan上传文件时不会出现错误,一旦使用Element-Plus中的el-upload组件上传文件时,后端老是出现如下错误:
Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required part 'file' is not present.]
查询了很多资料才发现忽视了最重要的问题,el-upload组件中的文件对象和SpirngBoot中
的MultipartFile不匹配,所以才会导致后台不能接受参数。el-upload组件中的文件对象名为:UploadFile。
先来看看原生form表单中的file对象:
在来看看el-upload组件中的file对象:
对比发现,在el-upload组件中的对象除了file以外还包含文件的基本信息。
下面是UploadFile对象源码:
interface UploadFile {
name: string
percentage?: number
status: UploadStatus
size?: number
response?: unknown
uid: number
url?: string
raw?: UploadRawFile
}
interface UploadRawFile extends File {
uid: number
}
所以,在后端想使用MultipartFile接口 接收参数,不能将整个UploadFile对象作为参数传递。
二、代码部分
1.前端使用el-upload组件上传文件:
<el-upload v-model:file-list="fileList" action="#" list-type="picture-card" :auto-upload="false" :limit="2">
<el-icon>
<Plus />
</el-icon>
</el-upload>
<el-button>取消</el-button>
<el-button @click="uploadFile">提交</el-button>
说明:
v-model:file-list="fileList" 用于接收文件列表
:auto-upload="false" 取消自动提交
:limit="2" 限制文件个数
2.对数据进行封装并发送ajax请求:
//接收上传的文件
const fileList = ref([])
//上传文件
const uploadFile = () => {
if (fileList.value.length > 0) {
// 封装为FromData对象
const fromData = new FormData()
fileList.value.forEach((val) => {
console.log('val.raw :>> ', val.raw);
fromData.append('file', val.raw)
})
// 发送ajax请求,上传文件
if (fromData != null) {
request.post('/upload', fromData, {
headers: {
'Content-Type': 'multipart/form-data',
}
})
}
}
}
注意:
1.必须指定请求头 'Content-Type': 'multipart/form-data'
2.此处我对axios进行了封装
3.后端Controller接收参数
// @CrossOrigin(origins ="*" ,maxAge = 3600)
@PostMapping("/upload")
@ResponseBody
public Object upload(@RequestParam MultipartFile[] file) {
for (int i = 0; i < file.length; i++) {
System.out.println(file[i].toString());
}
return "success";
}
注意:如果出现ajax跨域问题,跨域使用 @CrossOrigin 注解