Axios ile bir formdan dosya nasıl gönderilir

Aşağıdakileri kullanarak bir flask sunucusuna bir dosya gönderirken ham HTML kullanarak, küresel balon isteğinden dosyalara erişebilirim:

<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>

Şişede:

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

Axios ile aynı şeyi yapmaya çalıştığımda, küresel balon talebi boş:

<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'
        }
    })
}

Yukarıdaki aynı uploadFile işlevini kullanırsam ancak json başlıklarını axios.post yönteminden kaldırırsam, flask istek nesnemin form anahtarına bir csv dize değerleri listesi alırım (dosya bir .csv dosyasıdır).

Axios aracılığıyla gönderilen bir dosya nesnesini nasıl alabilirim?

Dosyayı bir formDatanesneye ekleyin ve Content-Typebaşlığı olarak ayarlayın 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'
    }
})

Vue kullanarak örnek uygulama. İsteği işlemek için localhost üzerinde çalışan bir arka uç sunucusu gerektirir:

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

Bu benim için çalışıyor, umarım birine yardımcı olur.

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