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

<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 خودتون

@hesammousavi

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

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

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

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

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

درود

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

موفق باشید