Cara memposting file dari formulir dengan Axios

Menggunakan HTML mentah ketika saya mengirim file ke server flask menggunakan perintah berikut, saya dapat mengakses file dari permintaan flask global:

<form id="uploadForm" action='upload_file' role="form" method="post" enctype=multipart/form-data>
    <input type="file" id="file" name="file">
    <input type=submit value=Upload>
</form>

Dalam labu:

def post(self):
    if 'file' in request.files:
        ....

Ketika saya mencoba melakukan hal yang sama dengan Axios, permintaan flask global kosong:

<form id="uploadForm" enctype="multipart/form-data" v-on:change="uploadFile">
<input type="file" id="file" name="file">
</form>

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
    })
}

Jika saya menggunakan fungsi uploadFile yang sama di atas tetapi menghapus header json dari metode axios.post, saya mendapatkan kunci formulir dari objek permintaan labu saya daftar csv dari nilai string (file adalah .csv).

Bagaimana saya bisa mendapatkan objek file yang dikirim melalui axios?

Tambahkan file ke formDataobjek, dan setel Content-Typeheader ke multipart/form-data.

var formData = new FormData();
var imagefile = document.querySelector('#file');
formData.append("image", imagefile.files[0]);
axios.post('upload_file', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
})

Contoh aplikasi menggunakan Vue. Membutuhkan server backend yang berjalan di localhost untuk memproses permintaan:

var app = new Vue({
  el: "#app",
  data: {
    file: ''
  },
  methods: {
    submitFile() {
      let formData = new FormData();
      formData.append('file', this.file);
      console.log('>> formData >> ', formData);

      // You should have a server side REST API 
      axios.post('http://localhost:8080/restapi/fileupload',
          formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }
        ).then(function () {
          console.log('SUCCESS!!');
        })
        .catch(function () {
          console.log('FAILURE!!');
        });
    },
    handleFileUpload() {
      this.file = this.$refs.file.files[0];
      console.log('>>>> 1st element in files array >>>> ', this.file);
    }
  }
});

https://codepen.io/pmarimuthu/pen/MqqaOE

Ini bekerja untuk saya, saya harap membantu seseorang.

var frm = $('#frm');
let formData = new FormData(frm[0]);
axios.post('your-url', formData)
    .then(res => {
        console.log({res});
    }).catch(err => {
        console.error({err});
    });