Comment publier un fichier depuis un formulaire avec Axios

En utilisant du HTML brut lorsque je publie 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:
        ....

Quand j'essaye de faire la même chose avec Axios, la requête globale du flacon 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 forme de mon objet de demande de flacon une liste csv de valeurs de chaîne (le fichier est un .csv).

Comment puis-je envoyer un objet fichier via axios?

Ajoutez le fichier à un formDataobjet et définissez l'en- Content-Typetête 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'
    }
})

Exemple d'application utilisant Vue. Nécessite un serveur backend 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

Cela fonctionne pour moi, j'espère aider à quelqu'un.

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