vue+elementUI实现表单数据和上传文件同一个接口同时上传
之前做项目有个需求,需要将收集的表单数据和文件点击提交后同时传给后台,且只有一个接口,而elementUI的Upload组件默认是选择完文件之后自动上传,就需要配置自定义上传。
·
之前做项目有个需求,需要将收集的表单数据和文件点击提交后同时传给后台,且只有一个接口,而elementUI的Upload组件默认是选择完文件之后自动上传,就需要配置自定义上传
这里使用的是elementui组件库中的Upload上传组件
1.部分代码
<el-upload
class="upload-demo"
action="#" //自定义上传需要将action为空或者"#"
:limit="1" //限定上传文件数量
:on-exceed="handleExceed" //文件数量超过限定触发
:auto-upload="false" //选取完文件后立即进行上传,这里要关闭
:multiple="false" //是否支持多选文件
ref="uploadExcel"
:http-request="uploadFile" //自定义上传
>
<el-button type="primary">导入文件</el-button>
</el-upload>
2.js部分:
//自定义上传方法,使用上传组件的submit()后才会触发以获取文件实体
uploadFile(param) {
this.file = param.file;
},
//上传文件+表单数据
submitEditForm() {
this.$refs.uploadExcel.submit();
//携带文件必须使用此对象
const formDatas = new FormData();
if (this.file) {
//append方法逐个添加键值对
formDatas.append("file", this.file); //把文件实体添加到表单对象
}
//添加收集的表单数据
this.addForm = this.form
//序列化其他数据为json添加到表单对象,后台反序列化获取对象实体,也可以单个append(),后台直接用对象取,如果一次性添加而不序列化会出错
formDatas.append("form", JSON.stringify(this.addForm));
//将数据随请求发过去
this.addTrans(formDatas);
},
//限制上传文件数量
handleExceed() {
this.$alert("文件数量超过限制", {
confirmButtonText: "确定",
});
},
实例化一个formData对象,使用append()方法将数据添加到对象中
formData里面存储的数据形式,一对key/value组成一条数据,key是唯一的,一个key可能对应多个value
key | value |
file | name |
form | [name1,name2,name3] |
注意:
使用append()方法,如果指定的key不存在则会新增一条数据,如果key存在,则添加到数据的末尾
无法直接打印实例化出来的对象 formDatas,要使用get()或getAll()
formData.get("form"); // 获取key为form的第一个值
formData.getAll("file"); // 返回一个数组,获取key为file的所有值
3.接口部分:
需要添加:'Content-Type': 'multipart/form-data'
addTrans(data) {
return request({
contentType: false,
headers: { 'Content-Type': 'multipart/form-data'},
method: 'post',
url: '/',
data: data,
})
},
更多推荐
已为社区贡献1条内容
所有评论(0)