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

当我们使用Vue.js和axios时，我们通常需要将表单数据提交到后端交给服务器处理。这包括一些简单的表单数据提交和上传文件. 这里提供一个完整攻略如何使用Vue.js和axios提交表单数据(包含上传文件)。

设置后端服务器接受表单数据和文件

首先，我们需要设置后端服务器接受表单数据和文件，并且返回响应结果。通常情况下，我们会使用一些服务器端框架例如Django、Flask、Express等。

安装 axios 和 Vue-axios

在开始前，我们需要安装和引入axios和Vue-axios两个库。

npm install axios vue-axios --save

安装完毕后，我们需要在main.js文件中添加以下代码：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

然后，我们可以通过this.axios.post或者this.axios.get方法实现数据的传输。

提交表单数据示例：POST提交简单表单

下面是一个简单的POST请求表单数据的例子。假设我们需要提交一个用户注册信息包含用户名和密码：

<template>
  <form @submit.prevent="submitForm">
    <label for="username">用户名:</label>
    <input type="text" v-model="user.username" required>
    <label for="password">密码:</label>
    <input type="password" v-model="user.password" required>
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    submitForm() {
      this.axios.post('/api/user/register', this.user)
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error.response.data)
        })
    }
  }
}
</script>

在上面的例子中，当用户点击提交按钮时，submitForm方法会发送一个POST请求到/api/user/register地址，包含用户名和密码。如果请求成功，控制台将会输出响应结果；如果请求失败（如响应状态码为4xx或5xx），控制台将会输出错误消息。

上传文件示例：POST上传文件

下面是一个上传文件的例子，假设我们需要上传一张图片到服务器上：

<template>
  <form @submit.prevent="submitForm">
    <label for="username">用户名:</label>
    <input type="text" v-model="user.username" required>

    <label for="file">请选择一张图片:</label>
    <input type="file" accept="image/*" v-on:change="onFileChange">
    <button type="submit">提交</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      user: {
        username: '',
        avatar: ''
      },
      file: null
    }
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0]
    },
    submitForm() {
      let formData = new FormData();
      formData.append('username', this.user.username);
      formData.append('avatar', this.file);

      this.axios.post('/api/user/register', formData)
        .then(response => {
          console.log(response.data)
        })
        .catch(error => {
          console.log(error.response.data)
        })
    }
  }
}
</script>

在上面的例子中，当用户选择一张图片后，onFileChange方法将会把选中的文件存储在file变量中，并且当用户提交表单时，submitForm方法将会构建一个FormData对象，并且把username和avatar数据存储在对象中，最后把数据以POST的方式提交给服务器地址为/api/user/register。如果请求成功，控制台将会输出响应结果；如果请求失败（如响应状态码为4xx或5xx），控制台将会输出错误消息。

到此，我们可以很方便地使用Vue.js和axios提交表单数据和上传文件。