如何在Vue中的Axios发布请求上附加文件

Question

您好，我正在尝试为axios.post附加文件，但是当我执行console.log（）时，formData为空，因此这是我正在使用的文件。

在我的Vue表单上

<form @submit.prevent="uploadTodos">
  <div>
   <input type="file" v-on:change="selectedFile($event)">
   <label>Choose file</label>
  </div>
   <button type="submit">Submit</button>
</form>

这是数据对象

data() {
     return {
         file: null,
      }
}

更改事件中的selectedFile的方法和方法

selectedFile(event) {
      this.file = event.target.files[0]
    },

这是Submit事件方法

 uploadTodos() {
      let formData = new FormData
      formData.append('file', this.file) 
      this.$store.dispatch('uploadTodos', formData)
    }

这是正在分派的存储方法

uploadTodos(context, file) {
      console.log(file)
      axios.post('/import', file,{ headers: {
        'Content-Type': 'multipart/form-data'
      }})
      .then(response => {
        console.log(response.data)
        context.commit('importTodos', response.data)
      })
      .catch(error => {
        console.log(error.response.data)
      })
    }

当我console.log（file）时，我得到了在uploadTodos（）方法中创建的formData，但是它为空，所以我试图弄清为什么它为空？

任何帮助将不胜感激