[MÚSICA] Os
uploads de arquivos são um recurso comum suportado por muitos servidores.
Então, ao preencher um formulário, por exemplo, você pode ter um campo lá
onde você preenche um nome de arquivo e, em seguida, carregue esse arquivo para o lado do servidor.
Como exemplo,
suponha que você esteja carregando as informações sobre um prato para o lado do servidor.
Então você também deseja carregar a imagem correspondente do prato
para o lado do servidor.
Então, no processo, você vai primeiro carregar a imagem do prato para o lado do servidor,
obter um URL para
essa imagem do lado do servidor onde quer que ela seja carregada e armazenada, e
então usar essa imagem no documento JSON que descreve o prato em detalhes.
De modo que, posteriormente, quando os clientes recuperam
o documento JSON descrevendo o prato para renderizar a interface do usuário, então, a partir do documento JSON, eles
poderão obter a URL da imagem prato que foi carregada no lado do servidor.
E, em seguida, usá-lo na construção da interface do usuário.
Assim, nos exemplos que vimos até agora, quando olhamos para os detalhes de
um prato, vimos que há uma imagem preenchida lá, que é uma string,
que não é nada além da URL para essa imagem correspondente a esse prato específico.
Ou a promoção ou o leitor como construímos em nosso servidor REST API.
Agora, nesta palestra, vamos aprender mais sobre como carregar arquivos.
Como ele é suportado em um servidor?
E então como podemos aproveitar um módulo de nó
que nos permite suportar o upload de arquivos.
Normalmente, os uploads de arquivos são suportados por meio de uma entrada de formulário.
Então, em uma entrada, se você especificar o tipo como arquivo e
o nome como o nome do campo lá,
então você seria capaz de fornecer o arquivo que será carregado
quando você clicar no botão enviar para este formulário particular aqui.
Agora, quando as informações do arquivo são carregadas para o lado do servidor,
os dados do formulário em si são normalmente codificados como
application/x-www-form-urlencoded ou multipart/form-data.
Então você desenha seu formulário, por exemplo, você irá projetar seu formulário com
a ação definida como /ImageUpload na inclinação da API REST,
que estará atuando como o ponto final para o qual você faz a postagem da imagem.
Assim que o método correspondente seria post, e o tipo de codificação,
você iria defini-lo para multipart/form-data dentro do seu formulário.
Então, isso significa que os elementos de formulário serão codificados no tipo de codificação
e, em seguida, carregados para o lado do servidor.
O upload de arquivos é mais eficiente com multipart/form-data.
E, portanto, essa é a abordagem preferida que usamos para fazer upload de arquivos.
Agora, se você quiser saber mais detalhes sobre upload de arquivos e upload de
formulários e aplicativo/x-www-form-urlencoded ou
multipart/form-data, então você pode ler o HTML5
(Recomendação W3C) onde os detalhes são fornecidos, e
também o correspondente Pedido IETF para Comentados documentos.
Eu tenho links para estes nos recursos adicionais caso você queira ler mais
sobre os detalhes reais de como esses tipos de codificação de formulário são suportados.
Da nossa perspectiva, quando usamos o multipart/form-data,
quando isso é incluído em uma
mensagem de solicitação HTTP que está indo para o lado do servidor, em seguida, no cabeçalho da mensagem de solicitação,
você terá um tipo de conteúdo definido como multipart/form-data.
E, em seguida, também um valor limite configurado assim.
O limite separa as várias partes do corpo da solicitação.
Assim, o próprio corpo de solicitação da mensagem de solicitação de saída será
dividido em várias partes.
E cada parte será delineada da parte anterior
usando este limite aqui.
Agora, a fim de ilustrar ainda mais os detalhes, eu preparei
o servidor para imprimir esta informação da mensagem de solicitação recebida.
Para que possamos examinar isso com um pouco mais de detalhes.
Olhando para os detalhes de
uma mensagem específica que eu enviei do meu carteiro para o lado do servidor,
você pode notar que aqui, Eu imprimi os cabeçalhos de solicitação aqui.
E, em particular, no cabeçalho da solicitação, deixe-me chamar sua atenção para este cabeçalho
aqui, chamado tipo de conteúdo, que é definido como multipart/form-data.
E, em seguida, note em particular o limite definido aqui
com este número longo aqui.
Então, esse é o cabeçalho de solicitação para
a mensagem de solicitação de entrada que eu publiquei usando o método post.
Na verdade, esta é exatamente a mensagem de solicitação que usarei
no exercício que se segue a esta palestra, a fim de fazer upload do arquivo.
Então, quando enviarmos esse arquivo lá, tudo bem, você vai notar que no
corpo do pedido, então é aqui que eu imprimi o corpo do pedido aqui embaixo.
E no corpo do pedido,
você vai notar que ele imprime esta linha em particular aqui.
E isso corresponde ao limite especificado aqui.
Portanto, este limite essencialmente especifica a separação entre as várias partes
do corpo multipart que faz parte desta mensagem de solicitação.
Então, no corpo da solicitação, você verá isso sendo definido aqui.
Além disso, você também irá especificar o mesmo Content-Disposition como form-data, o
que significa que eles vão interpretar isso como dados de formulário e
o nome correspondente a s ImageFile.
E o nome do arquivo em si do lado do cliente que foi carregado,
o nome do arquivo em si é dado aqui.
E, em seguida, abaixo, ele diz Content-Type: image/png.
Então eu estou carregando este arquivo de imagem PNG aqui.
Então, estes são os detalhes que são descritos aqui.
E à medida que você rolar para baixo até o próprio corpo da solicitação,
você verá os detalhes do que está incluído no corpo da solicitação.
Então isso dentro do arquivo PNG aqui, você verá esta informação no arquivo PNG.
Então, se você abrir o arquivo PNG, isso é o que você veria aqui.
Então isto contém um monte de caracteres aqui,
que obviamente na tela não podem ser impressos.
Então, à medida que você rolar para baixo, você vai todo esse conjunto de informações,
que é realmente o que está contido no corpo da solicitação da
mensagem de solicitação que está carregando este arquivo específico para o lado do servidor.
Então você vê que esse corpo realmente contém a versão codificada
da imagem lá.
E este é o fim do limite para esse corpo de solicitação.
Então, em nossa mensagem de solicitação, temos apenas um arquivo incluído aqui.
Você também pode fazer upload de vários arquivos, se ainda assim desejar.
Mas então, você precisa configurar o módulo npm apropriadamente para
aceitar vários arquivos.
Então, é assim que seu corpo de solicitação contém a versão codificada
da imagem, a partir da qual seu servidor irá extrair a imagem
e, em seguida, salvá-la no arquivo com o mesmo nome de arquivo no lado do servidor.
Então é assim que vamos configurar nosso aplicativo, o aplicativo do lado do servidor,
para fazer no exercício que segue esta palestra.
Então eu pensei que seria um
passo interessante para ilustrar para vocês exatamente o que meu servidor está recebendo.
E isso dirá por que estamos especificando esse limite aqui.
E como, dentro do próprio corpo de solicitação,
estamos usando o limite para delinear as várias partes do corpo de solicitação.
Assim, o lado do servidor, quando ele processa,
será capaz de extrair os dados da imagem do corpo da solicitação apropriadamente
e, em seguida, salvar o arquivo de imagem no lado do servidor.
Então, assim como eu tenho ilustrado no terminal
lá que o limite separa a parte do pedido de passagem múltipla.
E assim você viu o limite especificado lá.
Para trabalhar com os dados de formulário multipart contidos no corpo da solicitação,
vamos usar um módulo NPR que suporta o processamento
de dados de formulário multipart incluídos dentro do corpo da solicitação.
Ele extrairá automaticamente tudo para você e, em
seguida, carregá-lo em dois objetos no objeto de solicitação no lado do servidor.
Então, este módulo NPM chamado Multer, que quando instalado
em seu aplicativo do lado do servidor e
configurar o seu servidor expresso para usar Multer.
Em seguida, você será capaz de processar a mensagem de solicitação de entrada que
contém este multipart/form-data na mensagem de solicitação.
Então Multer é o módulo de nó onde isso
ajudará o servidor lidar com multipart/form-data.
Isto está escrito em cima de outro módulo NPM chamado garçom.
Busboy é um módulo que processa dados de formulário HTML de entrada, dados gerais de formulário HTML.
E um particular, Multer traz sobre o garçom para permitir que você
processe multipart/form-data no lado do servidor.
Agora, quando ele analisa essas informações, Multer irá
carregar os dados de formulário de entrada e adiciona um objeto de corpo ao req.
Então você terá um objeto req.body e também um objeto req.file.
Se você carregar um único arquivo, em seguida, ele vai continuar req.file objeto.
Em seguida, se você configurar o Multer para aceitar vários uploads de arquivos,
poderá configurar o objeto req.files.
O objeto de arquivos será uma matriz que contém todas as informações para
cada arquivo específico que é carregado no lado do servidor.
O próprio objeto de arquivo contém informações que resumem
a maneira como o arquivo é salvo no lado do servidor pelo Multer.
Com essa compreensão rápida de como o upload de arquivos funciona,
vamos passar para o exercício onde vamos realmente configurar o módulo Multer.
E, em seguida, usá-lo dentro do nosso aplicativo expresso para lidar com uploads
de arquivos do lado do cliente.
[ MUSIC]