Vue中怎么利用 axios提交表单数据，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。
我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作.
当然使用一般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>
关于Vue中怎么利用 axios提交表单数据问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注亿速云行业资讯频道了解更多相关知识。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
