Na lição anterior,
aprendemos sobre como os uploads de arquivos são
suportados através da abordagem de dados multiplataforma.
Neste exercício, vamos fazer uso do módulo Multer,
que mencionamos na palestra para permitir que nosso servidor express
suporte o upload de arquivos de imagem em nosso site do servidor.
Eles armazenarão esses arquivos de imagens na pasta público/images.
Estas imagens seriam úteis dentro da nossa aplicação quando fornecemos
imagens para os vários pratos, radares ou promoções,
que construímos no nosso servidor REST API.
Para começar com este exercício,
o primeiro passo,
é claro, é instalar o módulo Multer para o prompt tipo npm instalar
multer menos salvar e no momento eu estou usando multer 1.3.1 neste curso.
Então, uma vez instalado o módulo multer,
vamos para o nosso projeto e, em seguida, implementar uma nova rota que nos permite fazer upload de arquivos.
Vá para o projeto na pasta rotas,
vamos adicionar um novo arquivo chamado upload router.js.
Este roteador, roteador expresso que vamos implementar aqui,
é o que vai suportar o upload dos arquivos.
Então, no roteador de upload deixe-me apenas ir para
o roteador prato e copiar essas primeiras coisas do roteador prato
porque nós estamos praticamente indo para configurar
estrutura semelhante em nosso aplicativo ou o roteador de upload.
Então, deixe-me copiar essa parte e então vamos editar isso.
Então, no roteador de upload,
eu não preciso de mangusto, então eu vou remover o mangusto e eu não preciso dos pratos também.
Então, esses dois seriam removidos e depois disso
precisamos expressar o analisador corporal e autenticar.
Agora, vou precisar do módulo Multer aqui.
Uma vez que incluímos o módulo multer,
agora este roteador eu vou chamar isso como roteador de upload.
Então, vai dizer upload roteador usar o analisador de corpo e
, em seguida, este, mas o roteador de upload e novamente,
lembre-se de dizer exportações de módulo, upload roteador aqui.
Então, para a rota de roteadores de upload,
precisamos adicionar os vários métodos.
Eu vou fazer isso um pouco mais tarde, mas antes disso vamos configurar o
Multer para nos permitir carregar os arquivos.
Agora, por padrão, multer pode ser configurado simplesmente usando multer dentro da nossa aplicação,
mas eu vou fazer alguma configuração de multer
neste exercício para que nós vamos
personalizar a forma como multer lida com o upload dos arquivos.
Então, para usar o multer,
uma das opções que o multer leva é para o armazenamento.
Então, multer fornece esta função de armazenamento
em disco que nos permite definir o mecanismo de armazenamento e aqui podemos configurar algumas coisas.
Agora, se é apenas uma questão de configurar o destino,
você pode simplesmente dizer dois-pontos destinos
e, em seguida, especificar a pasta de destino dentro da qual os arquivos enviados serão armazenados.
Mas aqui eu vou fazer alguma configuração adicional para o módulo multer aqui.
Então, este é o lugar onde eu vou usar o suporte de armazenamento de disco multer.
Dentro do armazenamento em disco,
posso definir algumas opções aqui.
As opções que eu vou definir vão ser
destino e a segunda é o nome do arquivo.
Então, duas configurações que eu vou fornecer para o armazenamento em disco.
O destino como você esperaria,
me permite configurar o destino e isso leva
como uma configuração aqui uma função.
Então, o destino é configurado como uma função aqui.
Esta função receberá solicitação e também um objeto chamado o arquivo,
que contém informações sobre o arquivo que
foi processado por multer e também uma função de retorno de chamada.
Então, cb é a função de retorno de chamada.
Então, aqui para o destino,
eu vou dizer cb null,
o segundo parâmetro é a pasta de destino,
que pode ser expressa como uma string onde os arquivos serão armazenados.
Então, aqui, eu vou fornecer o destino como imagens públicas de barra.
Porque neste exercício eu vou apoiar uploads de imagens.
Então, essa é a parte que eu vou especificar aqui, então upload de imagem.
Então, a função de retorno de chamada como você vê leva dois parâmetros.
O primeiro é, é claro,
o erro que neste caso eu vou configurá-lo como
nulo e o segundo é a pasta de destino,
onde minhas imagens serão armazenadas.
Então, eu posso configurar isso dizendo imagens de barra pública.
Então, na pasta de imagens,
os arquivos que eu carrego serão armazenados.
Para o nome do arquivo também,
ele obtém os três parâmetros,
mensagem de solicitação, arquivo e a função de retorno de chamada.
Da configuração da forma como a função de retorno de chamada é chamada,
podemos especificar informações sobre o nome do arquivo.
Então, para a função callback eu diria cb null e não há nenhum erro aqui.
Então o segundo insiste no nome do arquivo,
que será usado para o arquivo específico que acabou de ser carregado,
como ele será armazenado.
Então, este objeto de arquivo que eu obtive aqui,
suporta um conjunto de várias propriedades nele.
Uma das propriedades é chamada, nome original.
Então, o nome original essencialmente,
dá-nos o nome original do arquivo do lado do cliente que foi carregado.
Insisto que, quando o arquivo for salvo no lado
do servidor, o arquivo receberá exatamente o
mesmo nome que o nome original do arquivo que foi carregado.
Para que eu possa saber que estou carregando
exatamente o mesmo arquivo e no lado do servidor quando
o arquivo é carregado será armazenado com o mesmo nome.
Agora, se você não configurar isso então,
multer por padrão dará alguma string aleatória
como o nome do arquivo sem extensões.
Então, isso pode não ser algo que você ficaria
feliz em usar neste exercício particular.
Então, é por isso que eu estou configurando explicitamente dizendo que,
o arquivo deve ser armazenado com o nome original do arquivo que foi carregado.
Vamos novamente encontrar este objeto de arquivo em
um pouco mais de detalhes e ver como
podemos fazer uso de informações do objeto de arquivo um pouco mais tarde.
Além disso, eu também posso especificar um filtro de arquivo aqui para a configuração de multers.
O filtro de arquivo me permitirá especificar que tipo de arquivos
estou disposto a carregar ou que estou disposto a aceitar para upload.
Então, para fazer isso eu vou configurar outra função chamada
filtro de arquivo de imagem const
e este eu vou definir a função em um minuto.
Agora, para isso, eu também posso salvar isso como
armazenamento const porque nós temos usado const para tudo,
então, eu vou apenas dizer armazenamento const.
Para o filtro de arquivo de imagem,
vou dizer filtro de arquivo de imagem const.
Novamente, ele recebe três parâmetros de solicitação
, objeto, o objeto de arquivo que contém as informações sobre
o arquivo que foi carregado e a função de retorno de chamada aqui.
Através da função de retorno de chamada,
vou passar informações de volta para a minha configuração multer que
me permite especificar como vou armazenar essas informações.
Então, isso vai ser uma função de seta aqui.
Dentro desta função de seta o que eu vou verificar é que,
Eu vou dizer se não o nome original do arquivo corresponde.
Então, o nome original é uma string aqui.
Então, eu estou tentando ver se há uma correspondência para essa string dizendo,
aqui dentro uma expressão regular.
Então, a expressão regular eu vou especificá-la como barra,
barra invertida ponto e, em seguida,
as opções que eu vou especificar é jpg
ou jpeg ou
png ou gif.
Então, é assim que eu especifico a expressão regular lá.
Para dizer que tudo bem,
se a extensão do arquivo contém jpg ou jpeg ou png ou gif,
então eu vou tratar isso como um arquivo de imagem e eu estarei disposto a aceitar esses arquivos.
Então, é isso que estamos testando aqui.
Se esse for o caso,
isto é, se a extensão do arquivo não corresponder a nenhuma dessas coisas, então,
é por isso que estamos vendo não, então vamos dizer, return cb.
Em seguida, observe que, o cb o primeiro parâmetro seria um erro.
Então, eu retornarei um novo erro
dizendo que você pode carregar apenas arquivos de imagem.
Então, estamos insistindo que os únicos arquivos que eles
aceitarão são arquivos de imagem e o segundo parâmetro seria falso.
Como estamos fornecendo o erro como o primeiro parâmetro,
o segundo parâmetro é definido como false.
O caso contrário é dizer cb null true.
Então, o que significa que o arquivo que está tentando ser
carregado corresponde ao padrão e por isso é um arquivo de imagem,
e por isso estamos dispostos a deixá-lo ser carregado.
Duas configurações que vamos fornecer para esse módulo Multer.
Como configuramos o módulo multer para uso dentro da nossa aplicação?
Este é o lugar onde eu vou declarar const upload
como multer e, em seguida, eu iria especificar entre parênteses que opções aqui.
Posso especificar o armazenamento como a função de armazenamento que acabei de definir aqui.
Esta função de armazenamento como o primeiro parâmetro,
e o segundo parâmetro é um filtro de arquivo.
Um filtro de arquivo é um método que me permite especificar
que tipo de arquivo eu estou disposto a aceitar e então eu vou dizer, filtro de arquivo de imagem.
Basta alternar o contorno da palavra,
para que você possa ver toda a linha aqui.
Então, ele diz que você pode carregar apenas arquivos de imagem e, em seguida, para o multer,
eu estou configurando o filtro de imagem, é isso.
Meu módulo multer agora está configurado para permitir que eu carregue os arquivos de imagem aqui.
Então vamos agora em frente e configurar o roteador de upload.
Para o roteador de upload,
vou permitir apenas o método post aqui.
Portanto, os
métodos get, put e delete não serão permitidos no endpoint do roteador de upload.
Para me ajudar a fazer isso,
vou ao roteador prato e depois lembrar que já tínhamos o put configurado aqui.
Vou copiar isso e, em seguida, vir para
o roteador de upload e, em seguida, eu vou colar essa informação aqui.
Vamos dizer, se é uma operação get, então eu não vou
apoiar que no endpoint seria ImageUpload.
O get não será permitido,
e da mesma forma o put não será permitido,
e também excluir não será permitido.
Não vou apoiar nenhuma dessas operações, então coloque, exclua.
Estes três não serão permitidos.
O único método que eu vou apoiar é o método post.
Para o método post,
vamos fazer essa autenticação todo o caminho até esse ponto.
Eu só vou copiar isso lá dentro,
fechar o ponto final e para o post.
Quando um arquivo é publicado,
como lidamos com esse post?
Para lidar com o posto aqui,
não preciso do próximo para isso.
Agora, além do autenticar VerifyUser e autenticar VerifyAdmin,
na mesma linha eu configurarei o upload.
Então, lembre-se que eu tinha configurado upload usando multer aqui.
Então, eu vou fazer uso do upload que
suporta uma função chamada como upload.single.
Esta única função toma como parâmetro.
O nome do campo de formulário que especifica esse arquivo,
você verá que em um curto espaço de tempo.
Este campo de formulário vou nomeá-lo como ImageFile aqui.
Upload single significa que ele vai permitir que eu carregue apenas um único arquivo aqui.
Esse único arquivo especificará no formulário de upload do lado do cliente
no upload de formulário de várias partes usando esse nome lá.
Quando o arquivo é obtido no código,
se eu chegar a este ponto,
este upload cuidará de lidar com os erros se houver algum,
se o arquivo não for carregado corretamente e assim por diante.
Quando você chegar a este ponto,
o arquivo teria sido carregado com sucesso e
então você precisa lidar com o arquivo carregado.
Neste ponto, vamos dizer Res.StatusCode é
200 e, em seguida, Res.SetHeader Content-Type,
'application/json'. O que eu vou fazer aqui é que,
vamos passar de volta este objeto req.file do servidor de volta para o cliente.
Este objeto req.file também conterá o caminho para o arquivo lá dentro e esse caminho pode ser
usado pelo cliente para configurar qualquer lugar
onde ele precisa saber a localização deste arquivo de imagem.
Por exemplo, se você estiver tentando carregar um prato
para o lado do servidor e os detalhes do prato para o lado do servidor,
você pode carregar a imagem para o servidor e, em seguida,
obter de volta o URL dessa imagem e, em seguida, você pode
incluir o URL dessa imagem no objeto json que descreve o prato.
Em seguida, carregue o documento json prato para o lado do servidor.
Em seguida, o req.file é passado de volta para
o cliente, o req.file como você verá quando executamos este servidor,
o req.file contém um monte de informações sobre
o arquivo que acabou de ser carregado e então eu vou
examinar isso para obter informações sobre o arquivo que eu acabei de carregar.
É assim que vamos configurar o método post lá, é isso.
Meu roteador de upload está pronto para aceitar uploads dos arquivos.
Agora, tudo o que eu preciso fazer é ir para app.js e, em seguida, configurar o roteador de upload.
Então, indo para app.js
Já temos todos esses roteadores.
Então, deixe-me apenas copiar seu LeaderRouter e, em seguida,
configurar isso como UploadRouter.
Então, isso está no arquivo UploadRouter aqui.
Então, vamos configurar o UploadRouter e, em seguida, indo abaixo aqui,
vamos agora configurar o endpoint ImageUpload.
Então, o endpoint ImageUpload me permite fazer upload do arquivo.
Então, isso seria UploadRouter. É isso.
Meu aplicativo agora está configurado para aceitar uploads de arquivos.
Então, vamos salvar as alterações e, em seguida, ir e dar uma olhada em como nosso aplicativo funciona.
Voltando para o Terminal,
agora certifique-se de que você tem seu servidor MongoDB funcionando em
uma das guias Terminal ou em um dos comandos Windows.
Na outra janela,
vamos iniciar o servidor.
Uma vez que o nosso servidor está funcionando,
vamos para o Postman e, em seguida, enviar ou melhor, fazer upload de um arquivo do Postman.
Então, como eu mencionei,
para carregar um arquivo,
você estará usando o multipart/form-data.
Então, primeiro, deixe-me entrar.
Então, eu vou fazer uma postagem no login de usuários locais,
e eu vou me conectar como o administrador porque
apenas o administrador pode fazer upload de seus arquivos lá.
Lembre-se de que seu servidor está agora em execução na porta segura.
Então, vamos dizer https://localhost:3443,
e não há autorização aqui.
Então, deixe-me desligar a autorização aqui e, em seguida, enviar o pedido para o servidor.
Então, no Postman, se isso está acontecendo,
que ele diz que não poderia obter qualquer resposta,
isso é porque você está executando agora o servidor seguro.
Então, nesse caso, o
Carteiro não aceitará o certificado autoassinado que está chegando.
Então, nesse caso, abra as configurações aqui e nas configurações,
no campo de configurações gerais,
você verá esta verificação de certificado SSL.
Desative isso para que seu Postman esteja disposto a aceitar
o certificado autoassinado que instalamos no lado do servidor.
Então, é assim que você poderá entrar em contato com seu servidor no
endpoint de login do usuário https://localhost:3443.
Então, quando tentamos fazer login agora,
você verá que sua solicitação de postagem foi
aceita com sucesso pelo servidor
e, em seguida, o servidor responde com as informações de token.
Então, novamente, para garantir que o Postman permita que você entre em contato com o servidor seguro,
clique em Configurações e, em Geral,
desative a validação do certificado SSL.
Então, uma vez que você fizer login,
vamos copiar o token aqui.
Então, vou copiar a ficha aqui.
Agora, vamos tentar carregar o arquivo.
Para fazer upload do arquivo, como você notou,
precisamos fazer upload desse arquivo no localhost: 3443,
e o endpoint é ImageUpload.
Para fazer o ImageUpload aqui
, no cabeçalho, precisamos configurar a autorização.
Então, vamos configurar a autorização,
e então você vai dizer,
“Portador”, e fornecer o token que obtivemos.
Então, mantenha uma cópia do token em algum lugar e copie o token no cabeçalho.
No corpo, para carregar um arquivo,
vamos usar este formulário de dados.
Então, isso é o que permite que você faça o multipart/form-data aqui.
Então, quando você clica no formulário de dados,
aqui você pode fornecer esse arquivo aqui que você queria carregar.
Então, quando você clicar em uma nova chave aqui,
use essa chave como ImageFile.
Lembre-se de que quando configuramos o método post no site UploadRouter,
especificamos dizendo upload único de um ImageFile.
Então, essa é a mesma chave que você vai usar aqui.
Então, quando você dá a chave,
em seguida, a segunda parte,
você vai definir isso de Texto para Arquivo aqui.
Então, isso é o que permite que você especifique o arquivo como o valor para essa chave específica.
Então, você verá este botão chegando dizendo, “Escolher arquivos”.
Então, você pode abrir isso e, em seguida, selecionar um arquivo que você deseja carregar.
Então, aqui, eu vou para o meu,
Eu tenho um arquivo em uma de minhas pastas aqui.
Então, eu só vou para as imagens de ativos,
e então nós vamos apenas fazer o upload de um arquivo PNG a partir daqui.
Então, você pode dizer,
“Carregar o arquivo específico”.
Então, como você se lembra,
configuramos nosso servidor para aceitar apenas ImageFile.
Então, diremos: “Carregue esse arquivo em particular.”
Então, quando você clica no botão Enviar,
então observe que no corpo,
você tem que configurar isso com form-data.
Então, o multipart/form-data e, em seguida, a chave é o ImageFile,
e o valor é o arquivo que você acabou de selecionar
e, em seguida, clique no botão Enviar.
Então, quando você clicar no botão Enviar,
o arquivo será carregado para o lado do servidor e,
em seguida, o servidor responderá de volta com este objeto.
Então, isso é o que está contido no
objeto req.file que está lá no objeto de solicitação aqui.
Então, esse arquivo req.file, como você vê, contém um nome de campo.
Nome do campo é ImageFile.
Então, note que este é exatamente o mesmo que este aqui.
O originalname, então observe que a expressão originalname contém alberto.png,
que é o arquivo que eu enviei.
Agora você pode ver por que quando eu configurei
o armazenamento e o nome do arquivo, eu defini file.originalname.
Então, isso é o que vai ser usado lá.
Você pode ver o tipo de codificação,
e o tipo MIME, e o destino, em
que pasta o arquivo foi colocado,
e o caminho real do arquivo aqui,
o caminho relativo da raiz da pasta do servidor aqui.
Então, esse caminho indica onde o arquivo está acessível no lado do servidor.
Então, se você estiver configurando os detalhes de um prato ou um líder, por exemplo,
você simplesmente usaria a propriedade image do líder para images/alberto.png.
Público não deve ser usado de qualquer maneira porque a pasta pública é
aquela que está agindo como a pasta raiz para o nosso servidor.
Então, você só precisa fornecer essas images.alberto.
Então, a partir deste caminho que você obtém,
uma vez que o arquivo é carregado com sucesso,
extraia esta parte e, em seguida, use-a para a imagem em
seu documento JSON que descreve o líder específico.
Então, é assim que fazemos upload de um arquivo.
Agora, para convencê-los de que a multa realmente foi carregada,
vamos para o nosso projeto.
Indo para o nosso projeto,
na pasta pública,
agora você pode ver que há uma subpasta de imagens lá.
Na subpasta de imagens,
você pode ver o arquivo alberta.png carregado lá.
Agora, podemos carregar mais ImageFiles em nosso lado do servidor.
Agora, se você tentar fazer upload de um não-ImageFile,
você veria que o servidor não aceitará
um não-ImageFile e, em seguida, responderá dizendo:
“Não é possível aceitar o não-ImageFile”.
Então, é assim que vamos configurar nosso servidor expresso
para aceitar uploads de ImageFiles do lado do cliente.
Com isso, completamos este exercício.
Neste exercício, vimos como usamos
o módulo meta para configurar nosso servidor express para
aceitar uploads de arquivos em um endpoint /ImageUpload Rest API.
Quando publicamos no endpoint,
o arquivo é carregado para uma pasta especificada no site do servidor.
Com isso, completamos este exercício.
Este é um bom momento para você fazer um commit git com a mensagem 'upload de arquivo'.