Como postar um arquivo de um formulário com Axios

Usando HTML bruto ao postar um arquivo em um servidor flask, posso acessar arquivos da solicitação 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>

Em frasco:

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

Quando tento fazer o mesmo com o Axios, a solicitação de frasco global está vazia:

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

Se eu usar a mesma função uploadFile acima, mas remover os cabeçalhos json do método axios.post, obtenho na chave do formulário do meu objeto de solicitação de balão uma lista csv de valores de string (o arquivo é um .csv).

Como posso obter um objeto de arquivo enviado via axios?

Adicione o arquivo a um formDataobjeto e defina o Content-Typecabeçalho como 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'
    }
})

Aplicação de amostra usando Vue. Requer um servidor de back-end em execução no host local para processar a solicitação:

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

Isso funciona para mim, espero que ajude alguém.

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