Membuat FormData Dari Object Javascript

Payload request Ajax menggunakan Axios bisa diisi dengan object. Pengguna VueJs tentu tidak asing dengan cara seperti ini karena sangat mudah dilakukan binding menggunakan v-model. Hanya saja saat ingin mengirim data string dan file sekaligus hal ini tidak bisa dilakukan karena v-model akan mengubah jenis file dari binary menjadi object. Salah satu cara mengatasi hal ini adalah mengubah object menjadi FormData dan menambahkan file kedalam Formdata tersebut.

Contoh Script untuk Mengubah Object Javascript Menjadi Formdata

Kode singkat di bawah ini dapat digunakan untuk mengubah object javascript menjadi form data dengan catatan object tersebut tidak nested atau hanya satu level saja.

Contoh objek javascript:

let user ={
 name: null,
 email: null,
 password: null
}

let formData = new FormData()
for(key in user){
 formData.append(key, user[key]);
}

Object user maupun formData di atas bisa dikirim sebagai payload request axios.

Contoh Mengirim Object melalui Axios

axios.post(url, user)

Perhatikan parameter kedua di atas diisi menggunakan object user.

Contoh Mengirim FormData melalui Axios

axios.post(url, formData)

Pada contoh diatas, parameter kedua diganti menggunakan formData yang dibuat dari object. Jika ingin menambahkan file dari input type file maka kita bisa mengakses melalui $refs. Katakanlah sebuah input file dibuat menggunakan ref attachment maka cara mengambilnya adalah dengan cara $refs.attachment.files.

Contoh input file yang digunakan untuk upload file adalah sebagai berikut:

<input type='file' ref='attachment'/>

Untuk menambahkan file tersebut kedalam form data alah sebagai berikut:

let file = this.$refs.attachment.files[0]
formData.append('file', file)