我在axios发布请求时遇到了问题,我总是按照以下步骤发送数据,它仍然有效,但今天不起作用。axios发送了空数据,但在控制台日志中我有数据。当我用邮递员测试时,一切正常,所以我认为问题出在查询级别。经过几次搜索,我发现我使用的方法很好,但为什么它不起作用。如果我只发送一个数据,它就起作用了。谢谢你的帮助
<template>
<div>
<form class="form-CreateOption" method="post" v-on:submit.prevent="Submit">
<div>
<p>Nom de l'option* </p>
<input type="text" name="nameOption" v-model="nameOption" id="nameOption">
</div>
<div>
<p>Description*</p>
<textarea class="detailOption" name="descriptionOption" id="" cols="30" rows="10" v-model="descriptionOption"></textarea>
</div>
<div>
<p>Prix*</p>
<input type="text" name="priceOption" v-model="priceOption">
</div>
<div>
<p>Image*</p>
<input name="imageUrlOption" type="file" @change="uploadOneFileOption($event)">
</div>
<div>
<button type="submit">Create</button>
</div>
</form>
</div>
</template>
<script>
import axios from 'axios'
export default {
name:'CreateOption',
data(){
return{
nameOption:"",
descriptionOption: "",
priceOption: "",
imageUrlOption:""
}
},
methods:{
uploadOneFileOption(event){
console.log(event)
this.imageUrlOption = event.target.files[0];
},
Submit(){
let token= localStorage.getItem('token')
const header = {
headers: {
'Content-type': 'application/json',
'Authorization': `Bearer ${token}`
}
}
const formDatas = new FormData();
console.log(formDatas.append)
formDatas.append('nameOption', this.nameOption)
formDatas.append('descriptionOption', this.descriptionOption)
console.log(this.descriptionOption)
formDatas.append('priceOption', this.priceOption)
console.log(this.nameOption)
formDatas.append('imageUrlOption', this.imageUrlOption)
axios.post('http://localhost:3000/api/option/create-option',formDatas,header)
.then((response) => {
console.log(response)
}).catch((err) => {
console.log({err: err})
});
}
}
}
</script>
console.log
nameOption
FormData
postman with image
postman without image
Backend