Stuck on uploading image by formData

Question

I have a page that user can change his picture profile, but I'm stuck when I do a submitHandle, because when I try to console.log(formData) it always gives me empty results.

this is my input file of picture profile

<input id="file-upload" type="file" name="fileUpload" class="d-none" @change="fileUpload">
<label for="file-upload">
    <img class="ap-img__main rounded-circle wh-120 bg-lighter d-flex" :src="`/dashboard/img/author/profile/`+user.avatar"alt="profile img" v-if="!imagePreview">
    <img class="ap-img__main rounded-circle wh-120 bg-lighter d-flex" :src="imagePreview" alt="profile img" v-if="imagePreview">
          <span class="cross" id="remove_pro_pic">
              <i class="fas fa-camera"></i>
          </span>
</label>

this is the methods

fileUpload(e) {
   let selectedImage = e.target.files[0];
   this.imageLocation = selectedImage;
   console.log(this.imageLocation.name);
   let reader = new FileReader();
   reader.readAsDataURL(this.imageLocation)
   reader.onload = e => {
   this.imagePreview = e.target.result;
 }
},

and it has results like this,

But when I click the save button to save file, by formData method, it will have empty results.

This is the button update,

<div class="button-group d-flex pt-25 justify-content-start">
    <button @click="submitHandle" class="btn btn-primary btn-default btn-squared text capitalize radius-md shadow2">Update details
    </button>
</div>

this is the submitHandle methods,

submitHandle() {
                e.preventDefault();
                var formData = new FormData();
                formData.append('image', this.imageLocation);
                formData.append('name', this.user.name);
                formData.append('username', this.user.username);
                formData.append('email', this.user.email);
                formData.append('phone', this.user.phone);
                formData.append('gender', this.user.gender);
                formData.append('birth', this.user.birth);
                formData.append('bio', this.user.bio);
                formData.append("facebook", this.user.facebook);
                formData.append("instagram", this.user.instagram);
                console.log(formData);
},

and when on console log, it is just shown like this,

please anyone, can help me to solve this? Thank you very much.

Answer 1

Logging FormData

The default toString() of FormData does not log its entries, so it only seems like the FormData is empty.

A quick way to log the entries is to wrap FormData.prototype.entries in an array:

console.log(Array.from(formData.entries()))

const formData = new FormData();
formData.append('image', 'my image');
formData.append('name', 'my name');
formData.append('username', 'my username');
formData.append('email', 'my email');
formData.append('phone', 'my phone');
formData.append('gender', 'my gender');
formData.append('birth', 'my birth');
formData.append('bio', 'my bio');
formData.append("facebook", 'my facebook');
formData.append("instagram", 'my instagram');
console.log(Array.from(formData.entries()));

Sending FormData with axios

axios.patch takes the FormData instance as its second argument:

axios.patch(apiServerUrl, formData)

Note you can easily create the FormData from the given <form> element if all its <input>s have the appropriate name attribute set, as seen in this example:

<template>
  <form @submit.prevent="submitHandle">
    <label>Profile Image <input type="file" name="image" autocomplete="photo" v-model="imageLocation"></label>
    <label>Username <input type="text" name="username" autocomplete="username" v-model="user.username"></label>
    <label>Email <input type="email" name="email" autocomplete="email" v-model="user.email"></label>
    <label>Phone <input type="tel" name="phone" autocomplete="tel" v-model="user.phone"></label>
    <label>Gender <input type="text" name="gender" autocomplete="sex" v-model="user.gender"></label>
    <label>Birthdate <input type="date" name="birth" autocomplete="bday" v-model="user.birth"></label>
    <label>Bio <textarea type="text" name="bio" v-model="user.bio"></textarea></label>
    <label>Facebook <input type="text" name="facebook" v-model="user.facebook"></label>
    <label>Instagram  <input type="text" name="instagram" v-model="user.instagram"></label>

    <button type="submit">Submit</button>
  </form>

  <pre>{{ response }}</pre>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      response: null,
      imageLocation: null,
      user: {
        username: null,
        email: null,
        phone: null,
        gender: null,
        birth: null,
        bio: null,
        facebook: null,
        instagram: null,
      }
    }
  },
  methods: {
    submitHandle(e) {
      const form = e.target
      const formData = new FormData(form)
      axios.patch('https://httpbin.org/patch', formData)
        .then(resp => this.response = resp.data)
    }
  }
}
</script>

<style>
label {
  display: block;
}
</style>

demo