1
00:00:00,000 --> 00:00:04,223
[MUSIC]

2
00:00:04,223 --> 00:00:09,176
Las cargas de archivos son una característica común que soportan muchos servidores. Por

3
00:00:09,176 --> 00:00:13,642
lo tanto, cuando rellene un formulario, por ejemplo, puede tener un campo allí

4
00:00:13,642 --> 00:00:18,600
donde rellene un nombre de archivo y luego cargue ese archivo en el lado del servidor.

5
00:00:18,600 --> 00:00:19,545
Como ejemplo,

6
00:00:19,545 --> 00:00:23,890
supongamos que está cargando la información sobre un plato en el lado del servidor.

7
00:00:23,890 --> 00:00:28,300
Entonces también querrá cargar la imagen correspondiente del plato en

8
00:00:28,300 --> 00:00:29,510
el lado del servidor.

9
00:00:29,510 --> 00:00:34,915
Por lo tanto, en el proceso, primero cargará la imagen del plato en el lado del servidor,

10
00:00:34,915 --> 00:00:36,770
obtendrá una URL para

11
00:00:36,770 --> 00:00:41,170
esa imagen desde el lado del servidor dondequiera que se cargue y almacene, y

12
00:00:41,170 --> 00:00:47,380
luego usará esa imagen en el documento JSON que describe el plato en detalle.

13
00:00:47,380 --> 00:00:53,050
De modo que posteriormente, cuando los clientes

14
00:00:53,050 --> 00:00:59,790
recuperen el documento JSON que describe el plato para renderizar la interfaz de usuario, entonces, desde dentro del documento JSON,

15
00:00:59,790 --> 00:01:04,310
podrán obtener la URL de la imagen del plato que se ha subido al lado del servidor.

16
00:01:04,310 --> 00:01:07,510
Y luego úsalo en la construcción de la interfaz de usuario.

17
00:01:07,510 --> 00:01:12,500
Así que en los ejemplos que hemos visto hasta ahora, cuando miramos los detalles de

18
00:01:12,500 --> 00:01:16,880
un plato, hemos visto que hay una imagen llena allí, que es una cadena,

19
00:01:16,880 --> 00:01:24,540
que no es más que la URL de esa imagen correspondiente a ese plato específico.

20
00:01:24,540 --> 00:01:32,300
O la promoción o el lector como hemos construido en nuestro servidor REST API.

21
00:01:32,300 --> 00:01:37,210
Ahora, en esta conferencia, vamos a aprender más sobre cómo subir archivos.

22
00:01:37,210 --> 00:01:39,802
¿ Cómo se admite en un servidor?

23
00:01:39,802 --> 00:01:43,940
Y luego cómo podemos aprovechar un módulo de nodo

24
00:01:43,940 --> 00:01:48,590
que nos permite soportar la carga de archivos.

25
00:01:50,260 --> 00:01:53,630
Normalmente, las cargas de archivos se admiten a través de una entrada de formulario.

26
00:01:53,630 --> 00:01:58,530
Entonces, en una entrada, si especifica el tipo como archivo y

27
00:01:58,530 --> 00:02:03,800
el nombre como el nombre del campo allí,

28
00:02:03,800 --> 00:02:09,210
entonces sería capaz de proporcionar el archivo que se cargará

29
00:02:09,210 --> 00:02:14,400
cuando haga clic en ese botón de enviar para este formulario en particular aquí.

30
00:02:14,400 --> 00:02:20,234
Ahora, cuando la información del archivo se carga en el lado del servidor,

31
00:02:20,234 --> 00:02:24,714
los datos del formulario en sí se codifican normalmente como

32
00:02:24,714 --> 00:02:31,200
application/x-www-form-urlencoded o multipart/form-data.

33
00:02:31,200 --> 00:02:35,900
Entonces diseña su formulario, por ejemplo, diseñará su formulario con la

34
00:02:35,900 --> 00:02:40,450
acción establecida en /imageUpload en la inclinación de la API REST,

35
00:02:40,450 --> 00:02:48,760
que actuará como el punto final al que realiza la publicación de la imagen.

36
00:02:48,760 --> 00:02:53,870
Para que el método correspondiente sea publicado, y el tipo de codificación,

37
00:02:53,870 --> 00:02:58,140
lo establecería en multipart/form-data dentro de su formulario.

38
00:02:58,140 --> 00:03:02,797
Por lo tanto, esto significa que los elementos del formulario se codificarán en el tipo de codificación

39
00:03:02,797 --> 00:03:05,920
y luego se cargarán en el lado del servidor.

40
00:03:05,920 --> 00:03:11,228
La carga de archivos es más eficiente con multipart/form-data.

41
00:03:11,228 --> 00:03:16,130
Y por lo tanto, ese es el enfoque preferido que usamos para cargar archivos.

42
00:03:17,560 --> 00:03:22,945
Ahora, si desea saber más detalles sobre la carga de archivos y la

43
00:03:22,945 --> 00:03:28,843
carga de formularios y la aplicación de la aplicación/x-www-form-urlencoded o

44
00:03:28,843 --> 00:03:33,848
el multipart/form-data, entonces puede leer el HTML5

45
00:03:33,848 --> 00:03:37,410
(Recomendación W3C) donde se dan los detalles, y

46
00:03:37,410 --> 00:03:42,270
también la solicitud correspondiente de IETF para Comented documentos.

47
00:03:42,270 --> 00:03:47,190
Tengo enlaces a estos en los recursos adicionales en caso de que desee leer más

48
00:03:47,190 --> 00:03:54,070
sobre los detalles reales de cómo se admiten estos tipos de codificación de formularios.

49
00:03:55,090 --> 00:04:00,110
Desde nuestra perspectiva, cuando usamos los datos multipart/form-data,

50
00:04:00,110 --> 00:04:04,850
cuando esto se incluye en un

51
00:04:04,850 --> 00:04:10,040
mensaje de solicitud HTTP que va al lado del servidor, entonces en el encabezado del mensaje de solicitud,

52
00:04:10,040 --> 00:04:15,320
tendrá un tipo de contenido establecido en multipart/form-data.

53
00:04:15,320 --> 00:04:19,410
Y luego también un valor de límite establecido así.

54
00:04:19,410 --> 00:04:23,305
El límite separa las varias partes del cuerpo de la solicitud.

55
00:04:23,305 --> 00:04:28,215
Por lo tanto, el cuerpo de la solicitud en sí mismo del mensaje de solicitud saliente se

56
00:04:28,215 --> 00:04:29,475
dividirá en varias partes.

57
00:04:29,475 --> 00:04:33,375
Y cada parte será delineada de la parte anterior

58
00:04:33,375 --> 00:04:36,582
mediante el uso de este límite aquí.

59
00:04:36,582 --> 00:04:40,912
Ahora, con el fin de ilustrarles los detalles, he preparado

60
00:04:40,912 --> 00:04:45,292
el servidor para imprimir esta información desde el mensaje de solicitud entrante.

61
00:04:45,292 --> 00:04:49,202
Para que podamos examinar esto con un poco más de detalle.

62
00:04:49,202 --> 00:04:52,092
Echando un vistazo a los detalles de

63
00:04:52,092 --> 00:04:57,850
un mensaje específico que he enviado desde mi cartero al lado del servidor,

64
00:04:57,850 --> 00:05:03,250
puede notar que aquí, he impreso los encabezados de solicitud aquí.

65
00:05:03,250 --> 00:05:08,530
Y en particular, en el encabezado de solicitud, permítanme llamar su atención sobre este encabezado

66
00:05:08,530 --> 00:05:13,500
aquí, llamado tipo de contenido, que se establece en multipart/form-data.

67
00:05:13,500 --> 00:05:17,720
Y luego tenga en cuenta en particular el límite definido aquí

68
00:05:17,720 --> 00:05:20,660
con este número largo aquí.

69
00:05:20,660 --> 00:05:23,500
Entonces ese es el encabezado de solicitud para

70
00:05:23,500 --> 00:05:28,400
el mensaje de solicitud entrante que he publicado usando el método de publicación.

71
00:05:28,400 --> 00:05:32,750
De hecho, este es exactamente el mensaje de solicitud que voy a usar

72
00:05:32,750 --> 00:05:37,710
en el ejercicio que sigue a esta conferencia para cargar el archivo.

73
00:05:37,710 --> 00:05:42,110
Así que cuando subamos ese archivo allí, de acuerdo, se dará cuenta de que en

74
00:05:42,110 --> 00:05:46,920
el cuerpo de la solicitud, así que aquí es donde imprimo el cuerpo de la solicitud abajo aquí.

75
00:05:46,920 --> 00:05:49,010
Y en el cuerpo de la solicitud,

76
00:05:49,010 --> 00:05:54,460
notará que imprime esta línea en particular aquí.

77
00:05:54,460 --> 00:05:58,040
Y esto corresponde al límite que se especifica aquí.

78
00:05:58,040 --> 00:06:04,717
Por lo tanto, este límite especifica esencialmente la separación entre las diversas partes

79
00:06:04,717 --> 00:06:10,070
del cuerpo multiparte que es parte de este mensaje de solicitud.

80
00:06:10,070 --> 00:06:13,330
Entonces, en el cuerpo de la solicitud, verá que esto se define aquí.

81
00:06:13,330 --> 00:06:18,810
Además, también especificará el mismo contenido que los datos de formulario,

82
00:06:18,810 --> 00:06:22,361
lo que significa que interpretarán esto como datos de formulario y

83
00:06:22,361 --> 00:06:24,920
el nombre correspondiente a s ImageFile.

84
00:06:26,120 --> 00:06:30,569
Y el nombre del archivo en sí desde el lado del cliente que se ha cargado,

85
00:06:30,569 --> 00:06:33,220
el nombre del archivo en sí se da aquí.

86
00:06:33,220 --> 00:06:38,180
Y luego abajo dice Content-Type: image/png.

87
00:06:38,180 --> 00:06:41,620
Así que estoy cargando este archivo de imagen PNG aquí.

88
00:06:41,620 --> 00:06:44,220
Así que estos son los detalles que se describen aquí.

89
00:06:44,220 --> 00:06:48,870
Y a medida que se desplaza hacia abajo en el cuerpo de la solicitud en sí,

90
00:06:48,870 --> 00:06:53,480
verá los detalles de lo que se incluye en el cuerpo de la solicitud.

91
00:06:53,480 --> 00:07:00,680
Así que esto dentro del archivo PNG aquí, verá esta información en el archivo PNG.

92
00:07:00,680 --> 00:07:03,970
Así que si abre el archivo PNG, esto es lo que vería aquí.

93
00:07:03,970 --> 00:07:07,200
Así que esto contiene un montón de caracteres aquí,

94
00:07:07,200 --> 00:07:09,960
que obviamente en la pantalla no se pueden imprimir.

95
00:07:09,960 --> 00:07:14,980
Entonces, a medida que se desplaza hacia abajo, hará todo este conjunto de información,

96
00:07:16,960 --> 00:07:21,730
que en realidad es lo que está contenido en el cuerpo de la solicitud del

97
00:07:21,730 --> 00:07:26,310
mensaje de solicitud que está cargando este archivo en particular en el lado del servidor.

98
00:07:26,310 --> 00:07:30,720
Así que ves que ese cuerpo realmente contiene la versión codificada

99
00:07:30,720 --> 00:07:33,640
de la imagen allí.

100
00:07:33,640 --> 00:07:39,650
Y este es el final del límite para ese cuerpo de solicitud.

101
00:07:39,650 --> 00:07:44,960
Así que en nuestro mensaje de solicitud, solo tenemos un archivo incluido aquí.

102
00:07:44,960 --> 00:07:48,230
También puedes cargar varios archivos si aún así lo deseas.

103
00:07:48,230 --> 00:07:53,140
Pero luego, debe configurar el módulo npm apropiadamente para

104
00:07:53,140 --> 00:07:55,490
aceptar múltiples archivos.

105
00:07:55,490 --> 00:08:02,780
Entonces, así es como su cuerpo de solicitud contiene la versión codificada

106
00:08:02,780 --> 00:08:08,045
de la imagen, de la que su servidor extraerá la imagen

107
00:08:08,045 --> 00:08:12,515
y luego la guardará en el archivo con el mismo nombre de archivo en el lado del servidor.

108
00:08:12,515 --> 00:08:17,245
Así es como configuraremos nuestra aplicación, la aplicación del lado del servidor,

109
00:08:17,245 --> 00:08:21,095
para hacer en el ejercicio que sigue a esta conferencia.

110
00:08:21,095 --> 00:08:23,990
Así que pensé que sería un

111
00:08:23,990 --> 00:08:28,500
paso interesante para ilustrarte exactamente lo que mi servidor está recibiendo.

112
00:08:28,500 --> 00:08:33,090
Y esto dirá por qué estamos especificando este límite aquí.

113
00:08:33,090 --> 00:08:35,230
Y cómo, dentro del propio cuerpo de la solicitud,

114
00:08:35,230 --> 00:08:41,163
estamos utilizando el límite para delinear las diversas partes del cuerpo de la solicitud.

115
00:08:41,163 --> 00:08:43,895
Por lo tanto, el lado del servidor, cuando procese,

116
00:08:43,895 --> 00:08:49,645
podrá extraer los datos de la imagen del cuerpo de la solicitud apropiadamente,

117
00:08:49,645 --> 00:08:52,660
y luego guardar el archivo de imagen en el lado del servidor.

118
00:08:53,890 --> 00:08:59,030
Así como he ilustrado en la terminal

119
00:08:59,030 --> 00:09:03,320
allí, ese límite separa la parte de solicitud multipass.

120
00:09:03,320 --> 00:09:06,538
Y así viste el límite especificado allí.

121
00:09:06,538 --> 00:09:12,843
Para trabajar con los datos de formulario multiparte contenidos en el cuerpo de la solicitud,

122
00:09:12,843 --> 00:09:17,768
vamos a utilizar un módulo NPR que admite el procesamiento

123
00:09:17,768 --> 00:09:22,610
de datos de formulario multiparte incluidos dentro del cuerpo de la solicitud.

124
00:09:22,610 --> 00:09:25,290
Extraerá automáticamente todo para usted y

125
00:09:25,290 --> 00:09:31,218
luego lo cargará en dos objetos en el objeto de solicitud en el lado del servidor.

126
00:09:31,218 --> 00:09:36,840
Así que este módulo npm llamado Multer, que cuando se instala

127
00:09:36,840 --> 00:09:41,280
en su aplicación del lado del servidor y

128
00:09:41,280 --> 00:09:44,910
configurar su servidor express para usar Multer.

129
00:09:44,910 --> 00:09:49,370
A continuación, podrá procesar el mensaje de solicitud entrante que

130
00:09:49,370 --> 00:09:52,560
contiene este multipart/form-data en el mensaje de solicitud.

131
00:09:52,560 --> 00:09:56,190
Entonces Multer es el módulo de nodo donde

132
00:09:56,190 --> 00:09:59,930
ayudará al servidor a manejar multipart/form-data.

133
00:09:59,930 --> 00:10:04,330
Esto está escrito encima de otro módulo npm llamado busboy.

134
00:10:04,330 --> 00:10:11,480
Busboy es un módulo que procesa datos de formulario HTML entrantes, datos generales de formulario HTML.

135
00:10:11,480 --> 00:10:16,350
Y, en particular, Multer trae a Busboy para permitirle

136
00:10:16,350 --> 00:10:20,330
procesar multiparte/form-data en su lado del servidor.

137
00:10:20,330 --> 00:10:24,040
Ahora, cuando analiza esta información, Multer

138
00:10:24,040 --> 00:10:29,280
cargará los datos del formulario entrante y agregará un objeto body a la req.

139
00:10:29,280 --> 00:10:34,070
Entonces tendrá un objeto req.body y también un objeto req.file.

140
00:10:34,070 --> 00:10:38,861
Si carga un solo archivo, entonces continuará objeto req.file.

141
00:10:38,861 --> 00:10:44,042
Luego, si configura su Multer para que

142
00:10:44,042 --> 00:10:47,590
acepte varias cargas de archivos, puede configurar el objeto req.files.

143
00:10:47,590 --> 00:10:51,480
El objeto files será una matriz que contiene toda la información de

144
00:10:51,480 --> 00:10:54,878
cada archivo en particular que se carga en el lado del servidor.

145
00:10:54,878 --> 00:11:00,565
El objeto de archivo contiene información que resume

146
00:11:00,565 --> 00:11:05,714
la forma en que Multer guarda el archivo en el lado del servidor.

147
00:11:05,714 --> 00:11:09,219
Con esta rápida comprensión de cómo funciona la carga de archivos,

148
00:11:09,219 --> 00:11:14,340
pasemos al ejercicio donde realmente configuraremos el módulo Multer.

149
00:11:14,340 --> 00:11:19,113
Y luego usarlo dentro de nuestra aplicación express para manejar las cargas

150
00:11:19,113 --> 00:11:20,685
de archivos desde el lado del cliente.

151
00:11:20,685 --> 00:11:26,869
[ MÚSICA]