Tengo un escenario en el que necesito cargar un archivo zip.
En el archivo zip, hay muchos archivos de imagen que se cargarán en AWS S3.
Debido a la gran cantidad de archivos en ese archivo zip, quiero obtener la información del proceso de carga. En mi opinión, la forma en que puedo obtener información es utilizando la respuesta de transmisión. Una vez que el servidor cargó un archivo, responda un json al cliente.
Cada vez que subo una imagen a S3, quiero responder un objeto json como el siguiente ejemplo. ejemplo de respuesta de transmisión json:
{ "file_name": "imgae1.jpg", "s3_url": "http://s3.url/key/to/file", "other_key": "key for this uploaded file" }Estoy tratando de lograr este enfoque usando vue (versión cdn) + axios (versión cdn). El siguiente código es cómo subo mi archivo zip.
function upload() { var file = document.querySelector("#upload_file") if (file.files.length <= 0) return var formData = new FormData(); formData.append("file", file.files[0]); formData.append("form_data", "form_data"); axios({ method: 'post', url: "http://127.0.0.1:8000/", headers: { 'Content-Type': 'multipart/form-data' }, responseType: 'stream', data: formData }).then(function (response) { if (response.status >= 200 && response.status < 300) { alert("All images uploaded!") } }) }pero esos ejemplos que encontré están usando el paquete axios npm que no puedo usar.
¿Hay algún método recomendado o algún recurso que pueda buscar? ¡Gracias por ayudar!
Puedes intentar usar fetch en lugar de esto:
fetch("http://example.url", { method: "POST", body: formData, mode: "no-cors", header: { "Content-Type": "multipart/form-data", }, }).then((response) => { a = response.clone(); a.json().then((data) => { //console.log('data', data) }); });