web-dev-qa-db-fra.com

Comment poster un fichier depuis un formulaire avec Axios

Utilisation de HTML brut lorsque je publie un fichier sur un serveur flask à l'aide des éléments suivants, je peux accéder à des 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, la demande flask globale 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, je reçois sous la clé de formulaire de mon objet de demande flask une liste csv de valeurs de chaîne (file est un fichier .csv).

Comment puis-je obtenir un objet de fichier envoyé via axios?

javascriptajaxfile-uploadaxios
77
Don Smythe

Ajoutez le fichier à un objet formData et définissez l'en-tête Content-Type sur 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'
    }
})
153
Niklesh Raut

Exemple d'application avec Vue. Nécessite un serveur dorsal s'exécutant 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

5
maris