Usando HTML sin procesar cuando publico un archivo en un servidor de matraz usando lo siguiente, puedo acceder a los archivos desde la solicitud de matraz 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>En matraz:
def post(self): if 'file' in request.files: ....Cuando trato de hacer lo mismo con Axios, la solicitud de 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?
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' } })Ejemplo de aplicación usando Vue. Requiere un servidor back-end 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); } } });Si no desea utilizar un objeto FormData (por ejemplo, su API toma firmas de tipo de contenido específico y multipart/formdata no 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 } }) }