NodeJs + Prisma + SqLite
Olá devs, estou fazendo uma aplicação nodejs + prisma, utilizando o sqlite como DB, e agora preciso armazenar imagens que irão vim do front-end para o DB, como faço isso?
Olá devs, estou fazendo uma aplicação nodejs + prisma, utilizando o sqlite como DB, e agora preciso armazenar imagens que irão vim do front-end para o DB, como faço isso?
Muitos bancos SQL tem suporte a dados do tipo binário(como no caso de uma imagem), no sqlite3 existe o tipo BLOB, que pode ser utilizado para salvar o conteúdo de uma imagem. Você pode definir um tabela que utiliza o tipo BLOB no prisma dessa forma:
// arquivo: schema.prisma
model Image {
id Int @id @default(autoincrement())
name @string
format @string @default("png")
content @bytes
}
Neste exemplo, o campo content
armazenaria o conteúdo da imagem. prisma-schema-reference#bytes.
Nossa que legal! Muito obrigado.
Olá, qual é o servidor que você esta usando?
Express, fastify(minha recomendação alias)
ou outro?
Express e Fastify tem plugins pra isso!
Para express pode usar o express-upload.
Se o site for pequeno apenas para testes ou que não tera muitos uploads
Para fastify use o fastify-formdata
Se for maior e com mais uploads!
Agora se for o node sem frameworks
Pode usar o Multer para poucos uploads
Se for muito uploads use o busboy.
OBS as imagens ficam na pasta do servidor
e os dados dela são salvos no banco de dados!
A parte mais importante é a localização e nome da imagem!
Para vc recuperar depois e poder servir como uma imagem normal!
Abraços
Olá, obrigado pelo comentario, geralmente eu utilizo o fastify mas nesse projeto utilizei o express.
Uriel, fiquei curioso, por quê você recomenda o Fastify? Eu tenho um projeto backend que faço uso do Express e sinto que ele fica "fora do meu caminho", é bem simples e tem uma clara separação do "meu código". Ainda não passei por uma grande dificuldade com o Express que me tenha feito questioná-lo, desde a primeira vez que usei ele, por volta de 2019.
Nunca usei o Fastify e não me lembro de já ter visto código dele, apesar de já ter ouvido falar.
Um framework que já ouvi recomendações foi o NestJS, e apesar de nunca ter usado, o código me parece ficar cheio de detalhes a mais, entrelaçado com o framework, mas pode ser apenas uma impressão minha como observador.
Fastify é igual ao express nesse ponto! Um servidor que fica lá fazendo o dele sem atrapalhar
o resto do código!
Fastify é baseado em express e Koa, ele aceita plugins do express
e tbm se vc quiser usa o o padrão de middleware.
https://www.fastify.io/docs/latest/Reference/Middleware/
A diferença dele pro expresse e outos é feito para a velocidade.
Ele é muito, muito rápido e sempre atualizado!
Olá, achei interessante o desafio e com algumas pesquisas fiz um breve projetinho com sua ideia.
// projeto proposto
mkdir save-image cd save-image npm init
// Prisma CLI
npm install -g prisma
// crie um arquivo 'schema.prisma' para as definições
datasource db {
provider = "sqlite"
url = "file:dev.db"
}
generator client {
provider = "prisma-client-js"
}
model User {
id Int @id @default(autoincrement())
name String
email String @unique
password String
image Bytes?
}
// para gerar o modelo do Prima baseado no arquivo 'schema.prisma'
npx prisma generate
// dependencias necessárias
npm install express cors @prisma/client sqlite3 npm install multer
// 'index.js' com instruções
const express = require('express');
const cors = require('cors');
const multer = require('multer');
const { PrismaClient, Prisma } = require('@prisma/client');
const prisma = new PrismaClient();
const app = express();
app.use(cors());
// adiciona users para teste
app.post('/users', async (req, res) => {
const newUser = await prisma.user.create({
data: {
id: 1,
name: 'John Doe',
email: '[email protected]',
password: 'password123',
},
});
res.json(newUser);
});
// retorna users
app.get('/users', async (req, res) => {
const users = await prisma.user.findMany();
res.json(users);
});
// remover users
app.delete('/users', async (req, res) => {
const users = await prisma.user.deleteMany();
res.json(users);
});
// Configuração do multer para salvar as imagens no diretório "uploads"
const storage = multer.diskStorage({
destination: './uploads',
filename: (req, file, cb) => {
cb(null, Date.now() + '-' + file.originalname);
}
});
const upload = multer({ storage });
// Rota para receber a imagem e salvar no banco de dados
app.post('/users/:id/image', upload.single('image'), async (req, res) => {
const { id } = req.params;
const { buffer } = req.file;
try {
const updatedUser = await prisma.user.update({
where: { id: Number(id) },
data: { image: buffer },
});
res.json(updatedUser);
} catch (error) {
console.error(error);
res.status(500).send('Erro ao atualizar o usuário.');
}
});
app.listen(3000, () => console.log('Servidor iniciado na porta 3000'));
// Execute o comando para gerar a tabela
npx prisma migrate dev
// Execute o comando para iniciar o projeto
npm start
Espero que ajude.
Gostei bastante muito obrigado, mas depois eu preciso pegar essas imagens do DB para exibir novamente no front, como eu iria fazer?
Salvar imagens no banco de dados não é uma boa prática. Apesar de ser possível, bancos de dados relacionais tradicionais não são os melhores locais para armazenar e recuperar esse tipo de dado.
O caminho mais básico utilizado é salvar a imagem ou qualquer arquivo (música, texto, video...) em algum local em disco e gravar na base de dados apenas o caminho desse arquivo em disco. Além disso, seu servidor deve servir esses arquivos como arquivos estáticos.
Mesmo assim, não é o melhor dos cenários, em aplicações reais você deve salvar esses arquivos binários em serviçoa como amazon S3 ou similar.
Ótima observação, creio que o @HenriikOliveira não tenha notado que o código salve a imagem em um pasta local. Criei o código apenas para exemplificar a possíbilidade, mas está longe de ser uma aplicação real.
Uma maneira de fazer isso é usar o módulo fs do Node.js para ler o arquivo da imagem e retorná-lo como resposta.