当在前端使用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>
发布于 2020-08-07 03: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);
https://stackoverflow.com/questions/63300746
复制相似问题