Vue axios 中提交表单数据(含上传文件)

时间：2021-05-26

我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作.

当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢?

<!DOCTYPE html><html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <form method="post" action="/upload" enctype="multipart/form-data"> <input type="text" name="name" value="" placeholder="请输入用户名"> <input type="text" name="age" value="" placeholder="请输入年龄"> <input type="file" name="uploadFile"> <input type="submit" value="提交"> </form> </body></html>

这种方式可以提交,那么问题来了,表单提交以后如果需要获取服务器的响应呢,如果需要在响应成功后跳转页面呢,这种方式显得不好处理.

切回正题,在vue中这种简单的表单提交如何处理呢,其实使用的是 FormData 来模拟表单提交

<head> <title></title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="https://cdn.bootcss.com/vue/2.3.4/vue.js"></script> <script src="https://cdn.bootcss.com/axios/0.16.2/axios.js"></script></head><body> <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="submitForm($event)">提交</button> </form> <script> window.onload = function () { Vue.prototype.$http = axios; new Vue({ el: 'form', data: { name: '', age: '', file: '' }, methods: { getFile(event) { this.file = event.target.files[0]; console.log(this.file); }, submitForm(event) { event.preventDefault(); let formData = new FormData(); formData.append('name', this.name); formData.append('age', this.age); formData.append('file', this.file); let config = { headers: { 'Content-Type': 'multipart/form-data' } } this.$http.post('/upload', formData, config).then(function (res) { if (res.status === 2000) { } }) } } }) } </script></body></html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章