如何通过 Axios 将文件和数据一起发布？

Posted 2023-02-22

【中文标题】如何通过 Axios 将文件和数据一起发布？

【英文标题】：How can I post file and data together via Axios?

【发布时间】：2020-08-14 14:39:19

【问题描述】：

我正在尝试发布数据（在 Vue 应用程序中）。表单中还有一个图像文件输入。所有教程和答案都只是告诉单独发送文件或与其他文件一起发送。[1][2]

我想要做的是将文件附加到我使用 v-model 绑定创建的现有对象中。

// Vue

<template>
    <input name="title" type="text" v-model="newPost.title" />
    <textarea name="content" v-model="newPost.content"></textarea>
    <input name="image" type="file" />
</template>
<script>
    ...
    newPost: 
        title: null,
        image: null,
        content: null
    
    ...
    addNewPost() 
        axios.post('/api/posts', this.newPost)
    
</script>

我应该怎么做？

【问题讨论】：

developer.mozilla.org/en-US/docs/Web/API/FormData

好吧，我在服务器端的 newPost 对象中验证表单输入。将每个输入附加到 FormData 变量（比如说 newPostData）会破坏表单验证。 FormData 不支持附加对象 AFAIK（请参阅github.com/form-data/form-data/issues/92）。

【参考方案1】：

您可以在客户端使用 Base64 编码并将编码字符串添加到您的发布请求并从服务器端解码： 此处的图像将是编码字符串，您可以在编写时发送 axios 请求。

【讨论】：

我会尽快试一试的！