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

2019-11-19 16:08:53

字体：大中小

来源：转载

供稿：网友

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

当然使用一般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>

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

上一篇：vuejs手把手教你写一个完整的购物车实例代码

下一篇：解决webpack打包速度慢的解决办法汇总