javascript - vue - patch axios

Cómo publicar un archivo desde un formulario con Axios

Question

Utilizando HTML sin formato cuando publico un archivo en un servidor de matraz usando lo siguiente, puedo acceder a los archivos desde la solicitud global de matraz:

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

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

Cuando trato de hacer lo mismo con Axios, la solicitud global del matraz está vacía:

<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 uso la misma función uploadFile anterior pero elimino los encabezados json del método axios.post, obtengo en la clave de formulario de mi objeto de solicitud de matraz una lista csv de valores de cadena (el archivo es un .csv).

¿Cómo puedo enviar un objeto de archivo a través de axios?

Answer 1

Agregue el archivo a un objeto formData y establezca el encabezado Content-Type en 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

Aplicación de muestra usando Vue. Requiere un servidor de fondo que se ejecute en localhost para procesar la solicitud:

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