Estoy tratando de cargar una imagen en un depósito S3 usando una URL prefirmada generada usando boto3 en Python. He estado usando el código Python de ejemplo que se proporcionó en la documentación y fue exitoso (la imagen se cargó correctamente con el tipo de contenido correcto). Sin embargo, cuando trato de hacer esto en Javascript para los propósitos de nuestra aplicación front-end, realmente estoy luchando para que funcione.
Aquí está el diccionario de ejemplo devuelto por el backend:
{ "fields": { "AWSAccessKeyId": "AKIAYS3VM3EBIFL7FKE5", "key": "posts/623255a762fd9bdfbd13f91a", "policy": "<very long string>", "signature": "Qvc/sGBHk0uzirzIfR1YmE2kFlo=" }, "url": "https://hotspot-storage.s3.amazonaws.com/" }Aquí está el código Python en funcionamiento :
response = <json response object> object_name = 'playground/example_profile_group.png' response['fields']['Content-Type'] = "image/png" # Demonstrate how another Python program can use the presigned URL to upload a file with open(object_name, 'rb') as f: files = {'file': (object_name, f)} http_response = requests.post(response['url'], data=response['fields'], files=files) # If successful, returns HTTP status code 204 print(http_response) print(http_response.text)Aquí está el código Javascript que no funciona:
const data = response.data; let payload = data.fields; payload['Content-Type'] = 'image/jpeg'; const file = { uri: previewPath, name: previewPath, type: 'image/jpeg', }; payload.file = file; const url = data.url; console.log(payload, "MY PAYLOAD") axios({ method: 'post', headers: {'Content-Type': 'multipart/form-data'}, url: url, data: payload, }) .then(function (response) { console.log(response.data, 'uploaded'); const data = response.data; }) .catch(function (error) { console.log( 'error uploading image', error.response.data, ); }); }) .catch(function (error) { console.log( 'error getting media link', error.response.data, ); });Este es el error que sigue siendo devuelto:
error uploading image <?xml version="1.0" encoding="UTF-8"?> <Error><Code>MalformedPOSTRequest</Code><Message>The body of your POST request is not well-formed multipart/form-data.</Message><RequestId>Q0ES6P4QP75YVVED</RequestId><HostId>eowLxSJQD1xP1EfHPnzGSJzXVGpPjurIMhkdwAD22JMvi9zRoFGg6Bq+mnUt/Lu7DNPY80iBDMc=</HostId></Error>He estado atascado en esto durante una cantidad absurda de tiempo y no puedo decir qué estoy haciendo mal. Cualquier ayuda sería muy apreciada.
Para enviar un cuerpo de solicitud multipart/form-data , deberá usar una instancia de FormData en lugar de un objeto de JavaScript.
Por ejemplo
const { url, fields } = response.data; const payload = new FormData(); payload.append("file", file); // this is the file blob, eg from <input type="file"> payload.append("Content-Type", "image/jpeg"); // add all the other fields Object.entries(fields).forEach(([ key, val ]) => { payload.append(key, val); }); // No need to manually set content-type header, your browser knows what to do const { data: result } = await axios.post(url, payload); console.log("uploaded", result);