elementui formdata
使用 ElementUI 上传文件时处理 FormData
ElementUI 的 el-upload 组件常用于文件上传，结合 FormData 可以方便地处理文件数据。以下是实现方法：
创建 FormData 对象并添加文件
const formData = new FormData();
formData.append('file', file.raw); // file.raw 是上传的文件对象配置 el-upload 组件
<el-upload
action="/api/upload"
:auto-upload="false"
:on-change="handleFileChange"
:http-request="customUpload">
<el-button type="primary">选择文件</el-button>
</el-upload>自定义上传方法
methods: {
customUpload(options) {
const formData = new FormData();
formData.append(options.filename, options.file);
axios.post(options.action, formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(response => {
// 处理响应
});
}
}表单数据与文件一起提交
当需要同时提交表单数据和文件时，可以将所有数据整合到 FormData 中：
构建包含表单数据的 FormData
submitForm() {
const formData = new FormData();
formData.append('username', this.form.username);
formData.append('avatar', this.fileList[0].raw);
axios.post('/api/submit', formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
});
}注意事项
设置正确的 Content-Type 头部很重要，必须使用 multipart/form-data
对于多个文件上传，可以循环添加文件到 FormData：
this.fileList.forEach(file => {
formData.append('files[]', file.raw);
});服务器端接收时需要注意处理 multipart 格式的数据，常见后端框架如 Express 需要中间件如 multer，Spring Boot 需要使用 @RequestParam MultipartFile 等
