vue axios 提交带有文件的表单数据

Vue和Axios可以用于提交带有文件的表单数据。以下是一个简单的示例：

首先，导入Vue和axios：

import Vue from 'vue';
import axios from 'axios';

然后，在Vue实例中创建一个方法用来处理表单的提交：

methods: {
  submitForm() {
    // 创建一个 FormData 对象
    let formData = new FormData();
    // 获取文件输入框的文件
    let file = this.$refs.fileInput.files[0];
    // 将文件添加到 FormData 对象中
    formData.append('file', file);

    // 使用 axios 发送 POST 请求，将 FormData 对象作为数据传递
    axios.post('/api/submit', formData)
      .then(response => {
        // 处理成功的响应
        console.log(response);
      })
      .catch(error => {
        // 处理错误的响应
        console.error(error);
      });
  }
}

在上面的代码中，我们首先创建了一个FormData对象，然后通过获取文件输入框中的文件并将其添加到FormData对象中。接下来，使用axios的post方法发送POST请求，并将FormData对象作为数据传递。然后，根据返回的响应进行相关处理。

需要注意的是，上述代码中的`this.$refs.fileInput`表示引用了一个具有`ref="fileInput"`属性的文件输入框，可以通过该引用来获取文件。

最后，在HTML模板中添加一个表单，并调用submitForm方法来提交表单：

<form @submit="submitForm">
  <input type="file" ref="fileInput" />
  <button type="submit">提交</button>
</form>

在上述代码中，我们监听了表单的submit事件，并在事件发生时调用submitForm方法。

以上就是使用Vue和Axios提交带有文件的表单数据的简单示例。