我正在尝试发布数据（在Vue应用程序中）。表单中还有一个图像文件输入。所有教程和答案都只是告诉您单独发送文件或与其他文件一起发送。1(https://stackoverflow.com/a/42096508/2549621) 2(https://serversideup.net/uploading-files-vuejs-axios/)
我想做的是将该文件附加到使用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>我该怎么做？
2条答案
按热度按时间af7jpaap1#
您可以在客户端使用Base64编码，并将编码字符串添加到您的post请求中，然后从服务器端进行解码：这里的图像将是编码字符串，您可以发送您所写的axios请求。
wkftcu5l2#
您无法使用 v-model 挂载所选文件。由于该文件是一个不断更改的元素，因此您应该使用**@change和ref**属性。
在捕获所选文件的函数中执行以下操作。
在这些步骤之后，您可以使用axios发送数据。