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

时间:2020-04-30 09:14:24

标签: vue.js axios

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

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

// 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>

我应该怎么做?

1 个答案:

答案 0 :(得分:1)

您可以在客户端使用Base64编码,并将编码后的字符串添加到发布请求中,然后从服务器端进行解码: 图像将是编码后的字符串,您可以在编写时发送axios请求。