Poster un fichier en Ajax à partir d'un formulaire avec Axios

Question

En utilisant le .html brut, lorsque je poste un fichier sur un serveur flask en utilisant ce qui suit, je peux accéder aux fichiers à partir de la requête flask globale :

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

En flacon :

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

Lorsque j'essaie de faire la même chose avec Axios, le flask request global est vide :

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

Si j'utilise la même fonction uploadFile ci-dessus mais que je supprime les en-têtes json de la méthode axios.post, j'obtiens dans la clé de formulaire de mon objet de requête flask une liste csv de valeurs de chaîne (le fichier est un .csv). Comment puis-je obtenir un objet fichier envoyé via axios ?

Answer 1

Ajouter le fichier à un formData et définir l'objet Content-Type à l'en-tête 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'
    }
})

Answer 2

Exemple d'application utilisant Vue. Nécessite un serveur dorsal fonctionnant sur localhost pour traiter la demande :

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