vue使用axios上传文件(FormData)的方法

下面是详细的Vue使用axios上传文件(FormData)的方法攻略：

1. 安装axios库

首先需要在Vue项目中安装axios库，可以通过npm命令进行安装：

npm install axios --save

2. 引入axios库

在Vue的组件中引入axios库的方法如下：

import axios from 'axios'

3. 创建FormData对象

创建FormData对象并添加需要上传的文件内容，示例代码如下：

let formData = new FormData();
formData.append('file', file);

其中的file参数为需要上传的文件对象，可以通过<input type="file">控件的change事件获取。

4. 发送POST请求

使用axios库发送POST请求并提交FormData对象，示例代码如下：

axios.post('/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
}).then(response => {
  console.log(response);
}).catch(error => {
  console.log(error);
});

其中/api/upload为上传文件接口地址，需要根据实际情况进行替换。此外，需要设置请求头的Content-Type为multipart/form-data来表明是一个上传文件请求。

完整示例

下面是一个完整的Vue组件示例，实现了上传一个图片文件并显示上传进度：

<template>
  <div>
    <input type="file" @change="handleFileChange">
    <button @click="handleUpload">上传</button>
    <div>上传进度：{{ progress }}</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      file: null,
      progress: 0
    }
  },
  methods: {
    handleFileChange(e) {
      this.file = e.target.files[0];
    },
    handleUpload() {
      let formData = new FormData();
      formData.append('file', this.file);
      axios.post('/api/upload', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        onUploadProgress: progressEvent => {
          this.progress = Math.round(progressEvent.loaded / progressEvent.total * 100);
        }
      }).then(response => {
        console.log(response);
      }).catch(error => {
        console.log(error);
      });
    }
  }
}
</script>

以上示例中，onUploadProgress函数用来实时更新上传进度状态，并将该状态绑定到模板中以便显示。