vue 使用 axios 提交表单数据(含 FormData 上传文件)
这里主要介绍如何使用 formData 对象上传文件。FormData 是 XMLHttpRequest Level 2 新增的一个对象,用来提交表单,其最大的优势是上传二进制文件。<!--文件上传表单--><form><input type="text" value=""
·
这里主要介绍如何使用 formData 对象上传文件。FormData 是 XMLHttpRequest Level 2 新增的一个对象,用来提交表单,其最大的优势是上传二进制文件。
<!--文件上传表单-->
<form>
<input type="text" value="" v-model="name" placeholder="请输入用户名">
<input type="text" value="" v-model="age" placeholder="请输入年龄">
<input type="file" @change="getFile($event)">
<button @click="submit($event)">提交</button>
</form>
获取上传文件:
getFile(event) {
this.file = event.target.files[0];
},
提交表单事件:
submit(event) {
event.preventDefault();//取消默认行为
//创建 formData 对象
let formData = new FormData();
// 向 formData 对象中添加文件
formData.append('name', this.name);
formData.append('age', this.age);
formData.append('file',this.file);
formData.append('file1',this.file1);
http.uploadFile("taskManage/uploadFile2",formData).then(function (response) {
console.log("res: ",response);
})
},
上传单文件和多文件其实都是一样,主要的区别在后台接受文件形式和前台如何向后台传递数据
更多推荐
已为社区贡献60条内容
所有评论(0)