0
137
VistasEnvío y visualización de imágenes desde Adonis V4.1
¿Cómo puedo enviar una imagen desde una aplicación React a Adonis, "guardarla" en la base de datos y, cuando sea necesario, recuperarla para usarla en el front-end?
En este momento, solo tuve éxito al procesar una imagen a través de Postman, mi código sería así:
const image = request.file('photo', { types: ['image'], size: '2mb', }); await image.move(Helpers.tmpPath('uploads'), { name: `${Date.now()}-${image.clientName}`, }); if (image.status !== 'moved') { return image.error; } ///// const data = { username, email, role, photo: image.fileName, password, access: 1, }; const user = await User.create(data); En la primera parte, proceso la imagen, la muevo a tmp dentro del backend, en la siguiente parte uso image.fileName y creo un usuario.
Y cuando necesito buscar mi lista de usuarios, lo hago así:
const colaboradoresList = await Database.raw( 'select * from colaboradores where access = 1' ); const userList = colaboradoresList[0]; userList.map((i) => (i.url = Helpers.tmpPath(`uploads/${i.photo}`))); Pero como puede ver, Helpers.tmpPath('uploads/${i.photo}')) devolverá la ruta local a la imagen actual, y no puedo mostrarla en React porque necesito usar la carpeta pública o descargarla e importar.
¿Hay alguna forma de hacerlo localmente, o la única forma sería crear un AWS y usar Drive.getUrl() para crear una URL y enviarla a mi interfaz?
2 Respuestas
Responde la pregunta0
Sí, la interfaz de usuario no puede mostrar archivos locales, debe exponer una URL pública para la imagen. Tienes dos opciones dependiendo del alcance de esta aplicación
Si planea ejecutar esto como una aplicación profesional, le sugiero que use algo como AWS S3 para almacenar imágenes.
De lo contrario, probablemente pueda salirse con la suya configurando una ruta para que la IU de React consulte. Algo como
/api/image/:idpodría devolver los datos codificados en binario o base64 de la imagen, que luego React podría mostrar.
0
en vez de
await image.move(Helpers.tmpPath('uploads'), { name: `${Date.now()}-${image.clientName}`, });Yo suelo:
await image.move(Helpers.publicPath('uploads'), {name: `${Date.now()}-${image.clientName}`}) Para eso necesitarás cambiar las carpetas para que se almacene correctamente:
Y luego enviar a la url = '/uploads/${i.photo}' , donde i.photo es el nombre del archivo, para que pueda concatenar en React así apiBase + url .
El resultado es su apiUrl + your file path que debería estar en la carpeta pública: 