Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

123
Vistas
La imagen del archivo se rompe después de cargarla en Amazon S3 Bucket

Estoy usando el servicio Amazon S3 para cargar imágenes a través de mi aplicación nativa de reacción. Usé la URL firmada enviada desde Amazon para realizar la carga, por lo que funciona así:

  1. Cuando el usuario abre la cámara para tomar una foto, envía una solicitud de obtención a mi servidor para obtener el enlace de la URL.
  2. Luego utilicé esa URL firmada para realizar la solicitud cuando el usuario validó la imagen.

El problema aquí es que el archivo (imagen jpeg) se rompe después de cargarlo en Amazon S3. Entonces, la carga funciona bien, pero no hay forma de que pueda abrir la imagen. Probé con Insomnia y funciona bien para abrir la imagen, por lo que debe estar relacionado con mi cuerpo formData que envié a través de mi aplicación nativa de reacción.

Aquí está el código de mi componente dentro de reaccionar nativo:

 const result = await ImagePicker.launchCameraAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, aspect: [1, 1], }); if (!result.cancelled) { const resizeResult = await ImageManipulator.manipulateAsync( result.uri, [{ resize: { height: 400, width: 400 } }], { format: "jpeg", compress: 0.8 } ); const formData = new FormData(); formData.append("putObject", { uri: resizeResult.uri, name: `${infoUser.id}`, // the name here shouldn't matter as it's already defined in the query (but I use the same that has be signed) type: "image/jpeg", }); const config = { headers: { "Content-Type": "image/jpeg", // I also tried : "multipart/form-data" }, }; // results.data is the signed url axios.put(results.data, formData, config); .then((res) => console.log(res)) .catch((e) => console.log(e.response));

La URL de la firma se ve así:

 https://bucketname.s3.eu-west-3.amazonaws.com/profile.jpg?Content-Type=image%2Fjpeg&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIASUE*******7%2Feu-west-3%2Fs3%2Faws4_request&X-Amz-Date=20210917T094406Z&X-Amz-Expires=900&X-Amz-Signature=a6828c1669*********ffe641b4a&X-Amz-SignedHeaders=host%3Bx-amz-acl&x-amz-acl=public-read

Estaba usando exactamente el mismo objeto formData para enviar imágenes a mi servidor antes de usar Amazon s3 y funcionaba bien.

Gracias

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Bueno, después de muchas pruebas, subí con éxito mis imágenes a Amazon S3, pero realmente no sé cómo funciona.

Así que en lugar de usar

 const formData = new FormData();

Simplemente paso el objeto resizeResult como mi solicitud de cuerpo.

La solicitud se ve así:

 await fetch(results.data, { method: "PUT", body: resizeResult, }) .then(() => console.log("success ?")) .catch((err) => { console.log(err); });

donde está el resizeResult

 Object { "height": 2112, "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540yoann84%252FoneTribe/ImageManipulator/95843dca-e89a-4cec-977b-cd2177d71f57.jpeg", "width": 400, }
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda