Ya probé varios códigos para cargar, desde axios hasta fetch. Pero, siempre termina con el mismo resultado. Aquí está lo más simple que se obtiene:
const formData = new FormData(); formData.append('file', ref) const response = await fetch( new Request(res.uploadSignedUrl, { method: 'PUT', body: formData, headers: new Headers({ 'Content-Type': ref.type, }) }) )El código anterior responde con el estado 200, pero cada vez que visito el enlace de la imagen cargada, aparece una pequeña imagen de cuadro blanco.
captura de pantalla de la imagen de la pequeña caja blanca
Y cuando elimino el encabezado en el segundo objeto de parámetro de búsqueda de solicitud, el tipo de contenido para ser específico, el enlace de la imagen cargada no me transfiere a un sitio web ni nada. Simplemente descarga automáticamente un tipo de archivo desconocido con sorprendentemente el tamaño de archivo exacto de la imagen que se supone que se va a cargar.
captura de pantalla de descarga automática
Tenga en cuenta que ya probé esto con varios tipos de archivos. Cualquier pensamiento dado sobre este tema será profundamente apreciado.
Editar: Además, logré ponerme en contacto con nuestro desarrollador de backend. Aquí está el resultado en cartero, creo: captura de pantalla del resultado de la carga útil
RESPUESTA: Lo comenté aquí
Si está tratando de enviar una imagen a su backend, y luego él la cargará en AWS Bucket, luego intente enviar la imagen como base64, entonces podrá hacer lo que necesite con eso.
código de muestra para hacer base64 a partir de la imagen
const canvas = document.createElement('canvas') const c = canvas.getContext('2d') canvas.height = image.height canvas.width = image.height c.drawImage(image, 0, 0, canvas.width, canvas.height) const base64 = canvas.toDataUrl('image/png' , 1.0)RESPONDER:
del usuario de reddit u/Wombarly,
Está cargando los datos del formulario en lugar de la imagen real. Por lo tanto, debe obtener el blob de imágenes y cargarlo en su lugar.
Los datos del formulario agregan el bit WebkitDisposition en la parte superior de la carga útil en la captura de pantalla. cuando PUT a S3 que se incluye en el archivo. corrompiéndolo.
Aquí hay un artículo que encontré que explica cómo:
Puedes ignorar el bit nativo de reacción
Nota adicional del autor de esta pregunta:
Nunca supe que WebkitDisposition en la carga útil hace que el archivo esté dañado para AWS S3. Así que tuve que agregar otra función para emitir el archivo Uri y continuar con la sugerencia de u/Wombarly. Donde uso el código aquí: https://stackoverflow.com/a/50719098/18373031 por Srijita como referencia. (La variable uri en la función _handleImageChange)