无法找到如何在Vue.js中生成包含“多部分/表单-数据”文件的Axios POST请求
无法找到如何在Vue.js中生成包含“多部分/表单-数据”文件的Axios POST请求
提问于 2020-08-07 11:19:33
当在前端使用Vue.js时涉及文件时，当POST请求涉及到Axios时，我在弄清楚如何向后端发出POST请求时遇到了极大的困难。
我想让用户为他正在创建的服务器选择一个图像，但是，我碰到了一个砖墙。我添加了一个带有文件类型的输入，每当用户选择一个图像时，我就将file属性设置为该图像。问题是我不知道下一步该做什么。如何使Axios以enctype= multipart/form-data的形式发送POST请求，以及如何将该文件应用于我与POST请求一起发送的有效负载？
<form @submit='createServer($event)'>
<input v-model="addServerInput.name" placeholder="Enter a server name">
<input type="file" name="image" @change="handleFileUpload($event)">
<button type="submit" name="button">Create</button>
</form>
<script>
import axios from 'axios'
export default {
data(){
return {
addServerInput: {
name: '',
file: ''
}
}
},
methods: {
handleFileUpload(event){
this.addServerInput.file = event.target.files[0]
},
createServer(event){
event.preventDefault()
let server = {
name: this.addServerInput.name,
userId: localStorage.userId
}
axios.post('/createServer', server)
.then((response) => {
this.addServerWindow = false;
this.$store.commit('addServer', response.data)
})
.catch((error) => {
console.log(error);
});
}
}
}
</script>回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-07 11:28:26
如果将一个普通对象作为第二个参数传递给post，那么Axios将将其编码为JSON。
若要将数据编码为多部分，请传递一个FormData object。
let server = new FormData();
server.append("file", this.addServerInput.file, this.addServerInput.name);
server.append("userId", localStorage.userId);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63300746
复制相关文章
相似问题
腾讯云开发者
