سلام دوستان
آیا راه دیگه ای به جز FormData هستش برای ارسال عکس به وسیله axios؟
چون با formData مشکلی دارم دیتای من ابجکت تو در تو هستش و میخام به این شکل بفرستم
{title: '', image: '', properties:{property1: '', property2: ''}}
ولی وقتی با formData میفرستم به این تبدیل میشه
{title: '', description: '', properties:{objecy object}}
راه های دیگه ای رو تست کردم ولی عکس ارسال نمیشه
ممنون میشم کمک کنید
در ضمن من از vuejs و laravel استفاده میکنم
درود
وقتی از کلاس FormData استفاده میکنید، شما نمیتونید به آرگومان دوم append یه آبجکت رو پاس بدید ...
نه که نتونید اما مقادیر ورودی به FormData بصورت اتومات تبدیل به "رشته" میشند. که به شکل "[object Object]" بهتون نمایش داده میشه.
شما چند راه دارید:
var data =
{
title: 'title',
image: 'image',
properties:{
property1: 'p1',
property2: 'p2'
}
}
var formData = objectToFormData(data);
از Blob استفاده کنید:
https://developer.mozilla.org/en-US/docs/Web/API/Blob#Blob_constructor_example_usage
مستقیما از JSON.stringify استفاده کنید
var data =
{
title: 'title',
image: 'image',
properties:{
property1: 'p1',
property2: 'p2'
}
}
for (let key in data){
if (typeof data === 'object')
{
console.log(key,":" , JSON.stringify(data\[key\]));
}
else {
console.log(key,":" , data\[key\]);
}
}
موفق باشید
<template>
<div class="container">
<form class="needs-validation" novalidate @submit.prevent="uploadImage()">
<div class="col-md-6 mb-3">
<input type="file" @change="onFileChange" />
<div class="card" style="width: 18rem;">
<img class="card-img-top" :src="logo" alt="Card image cap">
</div>
</div>
<button class="btn btn-primary btn-lg btn-block" type="submit">Upload</button>
</form>
</div>
</template>
اینم از توابعش
export default{
data(){
return{ logo : ''}
},
methods:{
onFileChange(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length)
return;
this.createImage(files[0]);
},
createImage(file) {
let reader = new FileReader();
let vm = this;
reader.onload = (e) => {
vm.logo= e.target.result;
};
reader.readAsDataURL(file);
},
uploadImage(){
axios.post('/api/upload',this.logo).then(response => {
console.log(response)
}).catch(error => {
alert(error)
})
},
}
}
@miladfathi021
میتونید از FormData استفاده کنید اطلاعاتتون رو داخلش قرار بدید و بفرستید برای api خودتون
سلام اخه عرض کردم
دیتای من این شکلی هستش
{title: '', image: '', properties:{property1: '', property2: ''}}
که وقتی append میکنم واسه properties رو به این شکل نمیفرسته بلکه ب شکل زیر میفرسته
{title: '', description: '', properties:{objecy object}}
سلام. axios رو حذف کنید و از دستورات ajax در جی کوئری ازش استفاده کنید.
اگه نمیخواید از جی کوئری استفاده کنید میتونید جی کوئری رو کاستوم کنید و فقط بخش ajax رو به پروژه اظافه کنید.
درود
وقتی از کلاس FormData استفاده میکنید، شما نمیتونید به آرگومان دوم append یه آبجکت رو پاس بدید ...
نه که نتونید اما مقادیر ورودی به FormData بصورت اتومات تبدیل به "رشته" میشند. که به شکل "[object Object]" بهتون نمایش داده میشه.
شما چند راه دارید:
var data =
{
title: 'title',
image: 'image',
properties:{
property1: 'p1',
property2: 'p2'
}
}
var formData = objectToFormData(data);
از Blob استفاده کنید:
https://developer.mozilla.org/en-US/docs/Web/API/Blob#Blob_constructor_example_usage
مستقیما از JSON.stringify استفاده کنید
var data =
{
title: 'title',
image: 'image',
properties:{
property1: 'p1',
property2: 'p2'
}
}
for (let key in data){
if (typeof data === 'object')
{
console.log(key,":" , JSON.stringify(data\[key\]));
}
else {
console.log(key,":" , data\[key\]);
}
}
موفق باشید
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟