ارسال عکس با axios در vuejs
سلام دوستان
آیا راه دیگه ای به جز FormData هستش برای ارسال عکس به وسیله axios؟
چون با formData مشکلی دارم دیتای من ابجکت تو در تو هستش و میخام به این شکل بفرستم
{title: '', image: '', properties:{property1: '', property2: ''}}ولی وقتی با formData میفرستم به این تبدیل میشه
{title: '', description: '', properties:{objecy object}}راه های دیگه ای رو تست کردم ولی عکس ارسال نمیشه
ممنون میشم کمک کنید
در ضمن من از vuejs و laravel استفاده میکنم
پاسخها
5
درود
وقتی از کلاس FormData استفاده میکنید، شما نمیتونید به آرگومان دوم append یه آبجکت رو پاس بدید ...
نه که نتونید اما مقادیر ورودی به FormData بصورت اتومات تبدیل به "رشته" میشند. که به شکل "[object Object]" بهتون نمایش داده میشه.
شما چند راه دارید:
- از پکیج object-to-formdata استفاده کنید. این پکیج کار تبدیل آبجکت هارو به یه Instance برای FormData انجام میده:
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 رو به پروژه اظافه کنید.