vuejs中的axios发布文件返回null

Question

我一直在尝试将带有 axios 的文件发布到我的数据库中。

<template>
<div>
 <v-file-input
                v-model="file"
                label="File input"
                id="file"
                ref="file"
        >
</v-file-input>
  <button v-on:click="submitFile()">Submit</button>
</div>
</template>

export default {
  name: "Test",
  data() {
    return {
      file: null,
    }
  },
  methods: {
    submitFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      axios.post('https://test_file_create/', formData).then(function() {
        console.log('SUCCESS!!');
      }).catch(function() {
        console.log('FAILURE!!');
      });
    },

  },
}

但问题出在我的数据库中，我的文件列为空，它似乎无法发布文件，尽管它返回“SUCCESS！！”在 submitFile 函数中。 谁能告诉我如何解决这个问题。

Answer 1

你在这里犯了几个错误，从最严重到最轻微......

1. <v-file-input> 组件将所选文件绑定到其模型，但您使用 handleFileUpload() 方法将您的 file 属性设置为组件本身（通过 $refs）。

   试试这个，使用 v-model 将你的 file 属性初始化为 null 而不是空字符串（这对于 File 对象没有意义）

   <v-file-input
     v-model="file"
     label="File input" 
     id="file" 
     ref="file"
   ></v-file-input>
   

   export default {
     name: "Test",
     data: () => ({ file: null }),
     // etc
   }
   

2. 从浏览器发送FormData 实例时，不要手动添加content-type 标头。 FormData 还需要特殊的 mime-boundary 令牌，应该自动处理

   axios.post("https://test_file_create/", formData).then(res => ...)
   

3. 您的模板中应该只有one root element。 <div> 是一个受欢迎的选择

   <template>
     <div>
       <v-file-input
         v-model="file"
         label="File input" 
         id="file" 
         ref="file"
       ></v-file-input>     
       <button :disabled="!file" type="button" @click="submitFile">Submit</button>
     </div>
   </template>