Quando um cliente da Web carrega um arquivo para um servidor, ele geralmente é enviado por meio de um formulário e codificado como multipart/form-data. Multer é o middleware Express usado para lidar com isso multipart/form-data quando seus usuários fazem upload de arquivos.
Neste tutorial, mostrarei como usar a biblioteca Multer para lidar com diferentes situações de upload de arquivos no Node.
Como o Muller funciona?
Como eu disse acima, Multer é um middleware Express. Middleware é um software que conecta diferentes aplicativos ou componentes de software. No Express, o middleware processa e transforma as solicitações recebidas no servidor. No nosso caso, o Multer atua como um auxiliar no upload de arquivos.
Configuração do projeto
Estaremos usando o framework Node Express para este projeto. Claro, você precisará ter o Node instalado.
Crie um diretório para nosso projeto, navegue até o diretório e execute npm init -y para criar um pacote.json arquivo que gerencia todas as dependências da nossa aplicação. o -y sufixo—também conhecido como yes bandeira-é usado para aceitar os valores padrão que vêm de npm init Comandos automaticamente.
mkdir upload-express cd upload-express npm init -y
Em seguida, instalaremos o Multer, o Express e as outras dependências necessárias para inicializar um aplicativo Express.
npm install express multer --save
Nós vamos criar um server.js Arquivo
touch server.js
No server.js arquivo, inicializaremos todos os módulos, criaremos um aplicativo Express e criaremos um servidor para conectar aos navegadores.
// require the installed packages
const express = require('express')
const multer = require('multer');
//CREATE EXPRESS APP
const app = express();
//ROUTES WILL GO HERE
app.get('/', function(req, res) {
res.json({ message: 'WELCOME' });
});
app.listen(3000, () =>
console.log('Server started on port 3000')
);
Depois de solicitar pacotes e ouvir nosso servidor em port:3000 podemos executar o trecho node server.js pois isso executa nosso servidor localmente. Podemos navegar para localhost:3000 no seu navegador e você deverá ver a seguinte mensagem.
Crie o código do cliente
Quando tivermos certeza de que nosso servidor está funcionando bem, a próxima coisa será criar um index.html para escrever todo o código que será servido ao cliente.
touch index.html
Este arquivo conterá os diferentes formulários que usaremos para carregar nossos diferentes tipos de arquivo.
MY APP
Abra o server.js arquivo e escreva uma rota GET que renderiza o index.html arquivo em vez do “RECEBER” mensagem.
// ROUTES
app.get('/',function(req,res){
res.sendFile(__dirname + '/index.html');
});
Armazenamento do Multer
A próxima coisa será definir um local de armazenamento para nossos arquivos. Multer oferece a opção de armazenar arquivos na memória multer.memoryStorage ou para disco memory.diskStorage. Para este projeto vamos armazenar os arquivos em disco.
Para o armazenamento em disco, temos dois objetos que são destino e nome do arquivo. destination é usado para informar ao Multer onde fazer upload dos arquivos e filename é usado para nomear o arquivo dentro do destino.
Para criar nosso diretório de destino, execute o trecho de código abaixo para criar uma nova pasta uploads
mkdir uploads
Aqui, adicionaremos os seguintes snippets de código ao server.js Arquivo.
//server.js
// SET STORAGE
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads')
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now())
}
})
var upload = multer({ storage: storage })
Lidando com uploads de arquivos
Carregando um único arquivo
No index.html arquivo, definimos um atributo de ação que executa uma solicitação POST. Agora precisamos criar um endpoint no aplicativo Express. Abra o server.js arquivo e adicione o seguinte trecho de código:
app.post('/uploadfile', upload.single('myFile'), (req, res, next) => {
const file = req.file
if (!file) {
const error = new Error('Please upload a file')
error.httpStatusCode = 400
return next(error)
}
res.send(file)
})
Observe que o nome do arquivo de entrada deve ser o mesmo que o myFile argumento passado para o upload.single função.
Fazendo upload de vários arquivos
O upload de vários arquivos com o Multer é semelhante ao upload de um único arquivo, mas com algumas alterações. o upload.array O método aceita dois parâmetros que são o nome do campo obrigatório myFiles e a contagem máxima de arquivos 12.
//Uploading multiple files
app.post('/uploadmultiple', upload.array('myFiles', 12), (req, res, next) => {
const files = req.files
if (!files) {
const error = new Error('Please choose files')
error.httpStatusCode = 400
return next(error)
}
res.send(files)
})
Fazendo upload de imagens
Em vez de salvar as imagens carregadas no sistema de arquivos, vamos armazená-las em um banco de dados MongoDB para que possamos recuperá-las posteriormente, conforme necessário. Mas primeiro, vamos instalar o MongoDB.
npm install mongodb --save
Em seguida, nos conectaremos ao MongoDB através do Mongo.client e, em seguida, adicione a URL do MongoDB a esse método. Você pode usar um serviço em nuvem como o Mlab, que oferece um plano gratuito, ou simplesmente usar a conexão disponível localmente. Neste tutorial, usaríamos a conexão disponível localmente, conforme mostrado abaixo. Incluiríamos os trechos de código abaixo no server.js Arquivo
const MongoClient = require('mongodb').MongoClient
const myurl="mongodb://localhost:27017";
MongoClient.connect(myurl, (err, client) => {
if (err) return console.log(err)
db = client.db('test')
app.listen(3000, () => {
console.log('Database connected successfully')
console.log('Server started on port 3000')
})
})
Precisaríamos ler o caminho do arquivo de nossa solicitação e no Nodejs, o conteúdo de um arquivo pode ser lido usando o file-system (fs) módulo. Temos que instalar o file-system dependência como mostrado abaixo
npm install file-system --save
o file-system module é um módulo embutido que possui os métodos readFile() e readFileSync(). Neste tutorial, usaremos o readFileSync() método. o readFileSync() é usado para ler o conteúdo de um arquivo de forma síncrona, isso significa que o método deve ser concluído antes que a execução do programa continue. Este método aceita o parâmetro patheste é o caminho relativo do arquivo que você deseja ler.
Aberto server.js, exigir o file-system dependência e definir uma solicitação POST que permite salvar imagens no banco de dados.
const fs = require('file-system');
app.post('/uploadphoto', upload.single('myImage'), (req, res) => {
var img = fs.readFileSync(req.file.path);
var encode_image = img.toString('base64');
// Define a JSONobject for the image attributes for saving to database
var finalImg = {
contentType: req.file.mimetype,
image: Buffer.from(encode_image, 'base64')
};
db.collection('myCollection').insertOne(finalImg, (err, result) => {
console.log(result)
if (err) return console.log(err)
console.log('saved to database')
res.redirect('/')
})
})
No código acima, primeiro codificamos a imagem em uma string base64, construímos um novo buffer a partir da string codificada em base64 e, em seguida, salvamos em nossa coleção de banco de dados no formato JSON.
Em seguida, exibimos uma mensagem de sucesso e redirecionamos o usuário para a página de índice.
Recuperando Imagens Armazenadas
Para recuperar as imagens armazenadas, realizamos uma pesquisa no MongoDB usando o find método e retornar uma matriz de resultados. Seguimos então e obtemos o _id atributos de todas as imagens e devolvê-los ao usuário.
app.get('/photos', (req, res) => {
db.collection('myCollection').find().toArray((err, result) => {
const imgArray = result.map(element => element._id);
console.log(imgArray);
if (err) return console.log(err)
res.send(imgArray)
})
});
Como já conhecemos os ids das imagens, podemos visualizar uma imagem passando seu id no navegador, conforme ilustrado abaixo.
const ObjectId = require('mongodb').ObjectId;
app.get('/photo/:id', (req, res) => {
var filename = req.params.id;
db.collection('myCollection').findOne({ '_id': ObjectId(filename) }, (err, result) => {
if (err) return console.log(err)
res.contentType('image/jpeg');
res.send(result.image.buffer)
})
})
Conclusão
Espero que você tenha achado este tutorial útil. O upload de arquivos pode ser um tópico intimidador, mas não precisa ser difícil de implementar. Com Express e Multer, o manuseio multipart/form-data é fácil e direto.
Você pode encontrar o código-fonte completo para o exemplo de upload de arquivo em nosso repositório do GitHub.
Este post foi atualizado com contribuições de Mary Okosun. Mary é desenvolvedora de software com sede em Lagos, Nigéria, com experiência em tecnologias Node.js, JavaScript, MySQL e NoSQL.
Originally posted 2022-05-25 19:06:09.
