我们经常使用表单来上传数据,以及上传文件,那么怎么在表单提交成功的时候接受服务器的响应,并作出相应操作.
当然使用一般jQuery上传对象的格式也是可以的,如果使用传统的表单上传呢?
<!DOCTYPE html> <html lang="en"> <head> <title></title> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1"> </head> <body> <form method="post" action="/upload" enctype="multipart/form-data"> <input type="text" value="" placeholder="请输入用户名"> <input type="text" value="" placeholder="请输入年龄"> <input type="file"> <input type="submit" value="提交"> </form> </body> </html>
这种方式可以提交,那么问题来了,表单提交以后如果需要获取服务器的响应呢,如果需要在响应成功后跳转页面呢,这种方式显得不好处理.
切回正题,在vue中这种简单的表单提交如何处理呢,其实使用的是 FormData 来模拟表单提交
<head> <title></title> <meta charset="UTF-8"> <meta 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>