如何在 vuetify 上的上传文件中使用 formdata?

Posted

技术标签:

【中文标题】如何在 vuetify 上的上传文件中使用 formdata?【英文标题】:How can I use formdata in upload file on vuetify? 【发布时间】:2020-06-04 12:10:52 【问题描述】:

我尝试这样:https://codepen.io/positivethinking639/pen/OJVRjGL?editors=1010

我的代码:

<v-form>
  <v-file-input multiple 
                v-model="documents"
                label="File input"></v-file-input>
  <v-btn color="success" @click="submit()">
    test
  </v-btn>
</v-form>

但它不起作用

如果我上传文件并单击按钮测试,控制台上的表单数据为空

我该如何解决这个问题?

【问题讨论】:

【参考方案1】:

您可以简单地使用展开运算符来查看表单数据。 FormData 是 XMLHttpRequest 规范的一部分。

console.log(...formData);

【讨论】:

【参考方案2】:

您不能直接在控制台上打印 formData。

试试这个。

// Display the key/value pairs
for (var pair of formData.entries()) 
    console.log(pair[0]+ ', ' + pair[1]); 

Codepen - https://codepen.io/positivethinking639/pen/OJVRjGL?editors=1010

【讨论】:

我想问。使用formdata发送和不使用formdata发送有什么区别? 要使用 Axios 发送文件时使用的表单数据 我使用 axios 发送文件 我得到的参考只是添加headers: 'Content-Type': 'multipart/form-data' 示例 - ***.com/questions/53784888/…

以上是关于如何在 vuetify 上的上传文件中使用 formdata?的主要内容,如果未能解决你的问题,请参考以下文章

如何删除 vuetify 上传的 3 个文件中的 1 个文件?

Vuetify 文件上传

如何从 vuetify 上的多个日期选择器获取日期?

使用 vuetify 2 v-file-input 和 axios 上传文件

如何在 Vuetify 的表格中显示嵌套列表

在 v-for 循环中使用 Vuetify v-btn 和加载器