javascript - vue - patch axios
Cómo publicar un archivo desde un formulario con Axios (2)
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''
}
})
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?
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);
}
}
});