Cómo publicar un archivo desde un formulario con Axios

Usando 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 intento hacer lo mismo con Axios, la solicitud del matraz global 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?

Mar 25 '17 14:03 Don Smythe

Aplicación de muestra usando Vue. Requiere un servidor backend 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

Sep 15 '2018 19:09 maris

Si no desea utilizar un FormDataobjeto (por ejemplo, su API toma firmas de tipo de contenido específicas y multipart/formdatano es una de ellas), puede hacer esto en su lugar:

uploadFile: function (event) {
    const file = event.target.files[0]
    axios.post('upload_file', file, {
        headers: {
          'Content-Type': file.type
        }
    })
}

Oct 28 '2020 22:10 Nathan Blake

Compartiendo mi experiencia con React y entrada HTML

Definir campo de entrada

<input type="file" onChange={onChange} accept ="image/*"/>

Definir el oyente onChange

const onChange = (e) => {
  let url = "https://<server-url>/api/upload";
  let file = e.target.files[0];
  uploadFile(url, file);
};

const uploadFile = (url, file) => {
  let formData = new FormData();
  formData.append("file", file);
  axios.post(url, formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((response) => {
      fnSuccess(response);
    }).catch((error) => {
      fnFail(error);
    });
};
const fnSuccess = (response) => {
  //Add success handling
};

const fnFail = (error) => {
  //Add failed handling
};

Apr 06 '2021 07:04 jfk