vuejs中的axios发布文件返回null

Posted 2023-02-22

【中文标题】vuejs中的axios发布文件返回null

【英文标题】：axios post file in vuejs return null

【发布时间】：2020-12-19 05:46:40

【问题描述】：

我一直在尝试将带有 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 函数中。 谁能告诉我如何解决这个问题。

【问题讨论】：

您是否在数据库中存储actual 文件？

我也删除了标题，但问题仍然存在，我的控制台中没有任何错误

你的服务器端是什么样子的？您究竟如何验证文件尚未上传？

【参考方案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

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

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

您的模板中应该只有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>

【讨论】：

使用 我无法分配 v-model 我得到一个错误，所以我不得不使用 handleFileUpload() insted 并且我看到其他人对 v-也有同样的问题模型也是。我已将代码更改为 axios.post("test_file_create", formData).then(res => ...) 但它仍然不起作用

当我使用 v-model 时出现错误 Invalid prop: custom validator check failed for prop "value"

@t.khatibi 我已经更新了我的答案。这是因为您将file 默认设置为空字符串

由于您的更改，我也更新了我的代码，但是在我的 json 文件中，当我发布一个 .xlsx 文件时，我得到它： ["pk":11,"attachment":null]

@t.khatibi 这个阶段，一定是你的服务器端代码有问题