parsa
5 سال پیش توسط parsa مطرح شد
5 پاسخ

ارسال عکس با axios در vuejs

سلام دوستان
آیا راه دیگه ای به جز FormData هستش برای ارسال عکس به وسیله axios؟
چون با formData مشکلی دارم دیتای من ابجکت تو در تو هستش و میخام به این شکل بفرستم

{title: '', image: '', properties:{property1: '', property2: ''}}

ولی وقتی با formData میفرستم به این تبدیل میشه

{title: '', description: '', properties:{objecy object}}

راه های دیگه ای رو تست کردم ولی عکس ارسال نمیشه

ممنون میشم کمک کنید

در ضمن من از vuejs و laravel استفاده میکنم

@ali.bayat
@hesammousavi
@Alimotreb


ثبت پرسش جدید
علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 5 سال پیش آپدیت شد
2

درود

وقتی از کلاس 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);

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\]);  
}  
}

موفق باشید


TEFO
تخصص : لاراول
@tefo.ha27 5 سال پیش مطرح شد
0
<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)
            })
        },
    }
}

حسام موسوی
تخصص : طراح و برنامه نویس
@hesammousavi 5 سال پیش مطرح شد
0

@miladfathi021
میتونید از FormData استفاده کنید اطلاعاتتون رو داخلش قرار بدید و بفرستید برای api خودتون


parsa
@parsahaghighi 5 سال پیش مطرح شد
0

@hesammousavi

سلام اخه عرض کردم
دیتای من این شکلی هستش

{title: '', image: '', properties:{property1: '', property2: ''}}

که وقتی append میکنم واسه properties رو به این شکل نمیفرسته بلکه ب شکل زیر میفرسته

{title: '', description: '', properties:{objecy object}}

mahdi khanzadi
تخصص : Software engineer
@khanzadimahdi 5 سال پیش مطرح شد
0

سلام. axios رو حذف کنید و از دستورات ajax در جی کوئری ازش استفاده کنید.
اگه نمیخواید از جی کوئری استفاده کنید میتونید جی کوئری رو کاستوم کنید و فقط بخش ajax رو به پروژه اظافه کنید.


علی بیات
تخصص : توسعه دهنده ارشد وب
@ali.bayat 5 سال پیش آپدیت شد
2

درود

وقتی از کلاس 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);

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\]);  
}  
}

موفق باشید


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام