![](/img/trans.png)
[英]sending array data with multipart/form-data post request in Axios vue.js
[英]Unable to figure out how to make an Axios POST request which contains “multipart/form-data” file in Vue.js
在将 Vue.js 用于前端和 Axios 用于 POST 请求时,当涉及文件时,我很难弄清楚如何向后端发出 POST 请求。
我想允许用户为他正在创建的服务器选择一个图像,但是,我遇到了障碍。 我添加了一个文件类型的输入,每当用户选择图像时,我都会将我的文件属性设置为该图像。 问题是我不知道下一步该做什么。 我应该如何让 Axios 将 POST 请求作为enctype= multipart/form-data
发送,我应该如何将文件应用于我通过 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>
如果您将普通的 object作为第二个参数传递给post
,则 Axios 会将其编码为 JSON。
要将数据编码为多部分,请改为传递FormData
object 。
let server = new FormData();
server.append("file", this.addServerInput.file, this.addServerInput.name);
server.append("userId", localStorage.userId);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.