1 00:00:01,140 --> 00:00:03,990 ‫Narrador: Ahora que se completó la función 2 00:00:03,990 --> 00:00:08,080 ‫de carga de fotos de usuario, aprendamos cómo cargar varios archivos 3 00:00:08,080 --> 00:00:10,080 ‫al mismo tiempo y 4 00:00:10,080 --> 00:00:13,170 ‫también cómo procesar varias imágenes al mismo tiempo. 5 00:00:13,170 --> 00:00:15,430 ‫Entonces, en esta conferencia y en 6 00:00:15,430 --> 00:00:18,713 ‫la siguiente, estaremos cargando y procesando imágenes de la gira. 7 00:00:20,770 --> 00:00:23,750 ‫Y para comenzar, recordemos qué tipo de imágenes queremos 8 00:00:23,750 --> 00:00:28,070 ‫para nuestros recorridos y también cuántas, por lo que deberíamos echar un 9 00:00:28,070 --> 00:00:31,033 ‫vistazo a nuestro modelo de recorrido aquí. 10 00:00:32,450 --> 00:00:37,450 ‫Y aquí tenemos la portada de la imagen y esa es en realidad 11 00:00:38,050 --> 00:00:40,170 ‫solo una imagen y 12 00:00:40,170 --> 00:00:42,400 ‫luego también tenemos el campo de 13 00:00:42,400 --> 00:00:45,610 ‫imagen que va a ser una matriz de imágenes. 14 00:00:45,610 --> 00:00:48,390 ‫Y, por lo general, estas deberían ser al menos tres imágenes 15 00:00:48,390 --> 00:00:51,000 ‫porque esa es la cantidad de imágenes que tenemos en 16 00:00:51,000 --> 00:00:52,950 ‫la página de detalles del recorrido. 17 00:00:52,950 --> 00:00:53,810 ‫¿Correcto? 18 00:00:53,810 --> 00:00:56,010 ‫Así que de nuevo, vamos a tener la 19 00:00:56,010 --> 00:00:58,290 ‫cubierta de la imagen y las imágenes como una matriz. 20 00:00:58,290 --> 00:00:59,410 ‫Está bien. 21 00:00:59,410 --> 00:01:01,240 ‫Ahora, la forma en 22 00:01:01,240 --> 00:01:04,080 ‫que vamos a cargar y procesar estas imágenes 23 00:01:04,080 --> 00:01:06,140 ‫será muy similar a lo 24 00:01:06,140 --> 00:01:09,620 ‫que hicimos con los usuarios, así que vayamos al 25 00:01:09,620 --> 00:01:13,444 ‫controlador de usuario y copiemos al menos esta parte inicial 26 00:01:13,444 --> 00:01:15,820 ‫aquí de la configuración del multer. 27 00:01:15,820 --> 00:01:18,620 ‫Muy bien, así que agarre eso y 28 00:01:18,620 --> 00:01:21,883 ‫luego en el controlador de recorrido, justo aquí 29 00:01:23,130 --> 00:01:25,774 ‫en la parte superior, pongámoslo 30 00:01:25,774 --> 00:01:29,293 ‫aquí y también obtengamos el requerimiento multer y agudo. 31 00:01:33,410 --> 00:01:37,610 ‫Está bien, genial. 32 00:01:37,610 --> 00:01:39,850 ‫Y así, al igual que 33 00:01:39,850 --> 00:01:42,750 ‫antes, almacenaremos las imágenes en la memoria, de 34 00:01:42,750 --> 00:01:46,900 ‫acuerdo, y también solo permitimos que las imágenes pasen nuestro filtro. 35 00:01:46,900 --> 00:01:51,720 ‫En otras palabras, solo queremos poder subir imágenes. 36 00:01:51,720 --> 00:01:52,553 ‫Está bien. 37 00:01:52,553 --> 00:01:54,670 ‫Luego, aquí creamos o cargamos exactamente 38 00:01:54,670 --> 00:01:57,060 ‫de la misma manera que antes, por 39 00:01:57,060 --> 00:01:58,180 ‫lo que 40 00:01:58,180 --> 00:02:01,420 ‫ahora creemos el middleware a partir de esta carga. 41 00:02:01,420 --> 00:02:02,780 ‫Está bien. 42 00:02:02,780 --> 00:02:07,780 ‫Por lo tanto, exporte el recorrido de carga de puntos, las imágenes y luego cárguelas. 43 00:02:12,540 --> 00:02:14,536 ‫Y ahora viene la 44 00:02:14,536 --> 00:02:17,020 ‫parte diferente, así que algo que va 45 00:02:17,020 --> 00:02:19,650 ‫a ser diferente a lo que hicimos 46 00:02:19,650 --> 00:02:24,380 ‫aquí en el controlador de usuarios porque habíamos subido el punto único. 47 00:02:24,380 --> 00:02:25,213 ‫Bueno. 48 00:02:25,213 --> 00:02:28,110 ‫Y eso fue porque solo teníamos un campo 49 00:02:28,110 --> 00:02:30,000 ‫con un archivo que queríamos 50 00:02:30,000 --> 00:02:32,930 ‫cargar y aquí está el nombre de ese campo. 51 00:02:32,930 --> 00:02:33,763 ‫¿Correcto? 52 00:02:33,763 --> 00:02:36,150 ‫Pero ahora tenemos varios archivos y en 53 00:02:36,150 --> 00:02:38,490 ‫uno de ellos tenemos una imagen 54 00:02:38,490 --> 00:02:40,920 ‫y en el otro tenemos tres imágenes. 55 00:02:40,920 --> 00:02:42,537 ‫Entonces, ¿cómo podemos hacer eso? 56 00:02:42,537 --> 00:02:47,010 ‫Bueno, vamos a usar campos de puntos de carga, por lo 57 00:02:47,010 --> 00:02:49,850 ‫que multer es perfectamente capaz de 58 00:02:49,850 --> 00:02:52,280 ‫manejar este tipo de situaciones. 59 00:02:52,280 --> 00:02:54,570 ‫Entonces aquí pasamos una matriz y cada 60 00:02:54,570 --> 00:02:57,520 ‫uno de los elementos es un objeto donde luego 61 00:02:57,520 --> 00:02:59,283 ‫especificamos el nombre del campo. 62 00:03:01,020 --> 00:03:02,420 ‫Y entonces el primero, 63 00:03:02,420 --> 00:03:07,420 ‫recuerde, es la cobertura de la imagen, y luego decimos que el conteo máximo es uno. 64 00:03:09,920 --> 00:03:11,820 ‫Y eso significa que 65 00:03:11,820 --> 00:03:14,220 ‫solo podemos tener un campo llamado 66 00:03:14,220 --> 00:03:16,730 ‫cobertura de imagen, que luego se procesará. 67 00:03:16,730 --> 00:03:20,163 ‫Muy bien, y luego hagamos lo mismo con nuestras imágenes, entonces ese 68 00:03:21,910 --> 00:03:24,210 ‫es el otro campo en nuestra base 69 00:03:24,210 --> 00:03:26,300 ‫de datos y aquí lo llamamos 70 00:03:27,400 --> 00:03:30,683 ‫imágenes también y aquí digamos que el conteo máximo es tres. 71 00:03:31,950 --> 00:03:32,783 ‫Está bien. 72 00:03:34,440 --> 00:03:37,350 ‫Y en caso de que no tuviéramos la 73 00:03:37,350 --> 00:03:41,340 ‫portada de la imagen y solo tuviera un campo que acepta múltiples 74 00:03:41,340 --> 00:03:43,870 ‫imágenes o múltiples archivos al mismo tiempo, 75 00:03:43,870 --> 00:03:45,483 ‫podríamos haberlo hecho así. 76 00:03:46,990 --> 00:03:51,910 ‫Entonces, usaríamos la matriz de puntos de carga, ¿de acuerdo? 77 00:03:51,910 --> 00:03:53,460 ‫Y luego el nombre 78 00:03:55,920 --> 00:04:00,730 ‫del campo, y luego básicamente el recuento máximo aquí como un número como este. 79 00:04:00,730 --> 00:04:01,640 ‫¿Está bien? 80 00:04:01,640 --> 00:04:06,120 ‫Entonces, cuando solo hay uno, entonces es un punto de carga único, digamos una imagen, 81 00:04:09,520 --> 00:04:13,240 ‫cuando hay varios con el mismo nombre, luego es una matriz de 82 00:04:13,240 --> 00:04:16,330 ‫puntos de carga y cuando hay básicamente una combinación de 83 00:04:16,330 --> 00:04:19,303 ‫ellos, entonces son campos de puntos de carga. 84 00:04:21,330 --> 00:04:22,750 ‫¿Okey? 85 00:04:22,750 --> 00:04:25,300 ‫Ahora, tal vez esto parezca un 86 00:04:25,300 --> 00:04:28,320 ‫poco complicado ahora, así que antes de continuar, 87 00:04:28,320 --> 00:04:31,630 ‫reproduzcamos este tipo de consulta en Postman, ¿de acuerdo? 88 00:04:31,630 --> 00:04:33,750 ‫Y, de hecho, antes de hacer eso, 89 00:04:33,750 --> 00:04:35,523 ‫necesitamos crear una nueva gira. 90 00:04:37,190 --> 00:04:39,280 ‫Muy bien, y de hecho lo 91 00:04:39,280 --> 00:04:42,490 ‫haré aquí en brújula simplemente duplicando uno de los 92 00:04:42,490 --> 00:04:44,330 ‫recorridos que ya tenemos. 93 00:04:44,330 --> 00:04:46,623 ‫Así que digamos aquí, el Sea Explorer, 94 00:04:47,920 --> 00:04:49,680 ‫y ahora lo estoy duplicando. 95 00:04:49,680 --> 00:04:53,780 ‫Y aquí puedo cambiar lo que quiero que sea diferente y 96 00:04:53,780 --> 00:04:56,743 ‫este se llama The Mountain Biker, digamos duración 97 00:04:59,270 --> 00:05:04,263 ‫de cinco, tamaño máximo de grupo de diez, y luego lo que realmente importa 98 00:05:05,190 --> 00:05:08,120 ‫es deshacerme de la portada de la imagen 99 00:05:08,120 --> 00:05:12,840 ‫porque eso es lo que queremos desea actualizar más tarde y también la 100 00:05:12,840 --> 00:05:14,453 ‫matriz de imágenes. 101 00:05:15,640 --> 00:05:20,300 ‫Creado en también puede ir y, por supuesto, tenemos 102 00:05:20,300 --> 00:05:25,300 ‫que cambiar la babosa, por lo que el ciclista de montaña. 103 00:05:27,780 --> 00:05:28,710 ‫¿Okey? 104 00:05:28,710 --> 00:05:30,390 ‫Y, por cierto, necesitábamos 105 00:05:30,390 --> 00:05:34,200 ‫crear un nuevo recorrido como este para que realmente tengamos las 106 00:05:34,200 --> 00:05:36,970 ‫ubicaciones, el resumen y la descripción, y todo 107 00:05:36,970 --> 00:05:41,030 ‫eso, para que el turista pueda representar correctamente en nuestro sitio web. 108 00:05:41,030 --> 00:05:44,770 ‫Muy bien, insertémoslo y debería estar 109 00:05:44,770 --> 00:05:49,270 ‫en algún lugar aquí al final, de acuerdo. 110 00:05:49,270 --> 00:05:54,270 ‫Así que tomemos la identificación aquí y ahora aquí 111 00:05:55,070 --> 00:05:59,020 ‫en Postman, luego actualice el recorrido. 112 00:05:59,020 --> 00:06:02,960 ‫Así que pasamos eso aquí y ahora en nuestro 113 00:06:02,960 --> 00:06:07,960 ‫cuerpo, recordemos que necesitamos cambiar de datos brutos a datos de forma. 114 00:06:08,104 --> 00:06:09,103 ‫¿Okey? 115 00:06:11,490 --> 00:06:16,490 ‫Cerremos todos estos aquí y también inicie sesión aquí como administrador 116 00:06:17,090 --> 00:06:20,210 ‫porque, de lo contrario, la actualización del 117 00:06:20,210 --> 00:06:22,010 ‫recorrido no funcionará. 118 00:06:23,070 --> 00:06:28,070 ‫Entonces admin @ nators. io, está bien. 119 00:06:31,740 --> 00:06:35,508 ‫Y ahora vamos a recrear una solicitud de cuerpo aquí similar 120 00:06:35,508 --> 00:06:38,210 ‫a la que acabamos de especificar aquí. 121 00:06:38,210 --> 00:06:42,070 ‫Básicamente similar a lo que espera nuestra carga de multer, por lo 122 00:06:42,070 --> 00:06:44,973 ‫que una imagen de portada y tres imágenes. 123 00:06:47,060 --> 00:06:52,060 ‫Entonces, la portada de la imagen, que es un archivo, así que seleccionemos eso. 124 00:06:55,670 --> 00:06:58,630 ‫Y aquí tenemos estas nuevas fotos para 125 00:06:59,660 --> 00:07:02,050 ‫recorridos y, de hecho, usemos esta 126 00:07:02,050 --> 00:07:05,837 ‫primera aquí como imagen de portada y luego como 127 00:07:08,450 --> 00:07:12,290 ‫imágenes, pongamos eso aquí para archivar también, y luego 128 00:07:12,290 --> 00:07:14,543 ‫aquí las otras tres. 129 00:07:16,420 --> 00:07:19,943 ‫Y ahora, como ves, todos ellos se llamarán imágenes. 130 00:07:26,440 --> 00:07:29,940 ‫De acuerdo, y solo podemos tener un máximo de tres, 131 00:07:29,940 --> 00:07:32,070 ‫al menos solo tres de 132 00:07:32,070 --> 00:07:34,680 ‫ellos serán procesados por multer, ¿de acuerdo? 133 00:07:37,620 --> 00:07:40,490 ‫Y de hecho aquí ves que realmente necesitamos 134 00:07:40,490 --> 00:07:43,380 ‫cambiar el tamaño de este porque en nuestro sitio 135 00:07:43,380 --> 00:07:46,090 ‫web todos aparecen en este formato horizontal y 136 00:07:46,090 --> 00:07:48,550 ‫no vertical como lo tenemos aquí. 137 00:07:48,550 --> 00:07:49,383 ‫¿Está bien? 138 00:07:49,383 --> 00:07:51,139 ‫Y por eso, 139 00:07:51,139 --> 00:07:55,940 ‫por supuesto, es necesario procesar también estas imágenes, ¿de acuerdo? 140 00:07:55,940 --> 00:07:58,590 ‫Y, por supuesto, también podemos cambiar otras 141 00:07:58,590 --> 00:08:03,563 ‫cosas aquí, así que digamos que queremos cambiar el precio a 9-9-7, ¿de acuerdo? 142 00:08:05,610 --> 00:08:09,690 ‫Ahora, no voy a enviar esta solicitud todavía porque no 143 00:08:09,690 --> 00:08:12,500 ‫tenemos ninguna lógica implementada para manejarla en 144 00:08:12,500 --> 00:08:15,280 ‫este momento, ¿verdad? Porque realmente no 145 00:08:15,280 --> 00:08:17,260 ‫la estamos subiendo al 146 00:08:17,260 --> 00:08:21,360 ‫sistema de archivos, solo la guardamos en la memoria. . 147 00:08:21,360 --> 00:08:23,870 ‫Entonces, para echarles un vistazo 148 00:08:23,870 --> 00:08:26,808 ‫rápidamente, creemos nuestro próximo middleware aquí, 149 00:08:26,808 --> 00:08:29,913 ‫que será el que procese estas imágenes. 150 00:08:31,250 --> 00:08:36,250 ‫Por lo tanto, exporte las imágenes de la gira de redimensionamiento de puntos, 151 00:08:42,810 --> 00:08:47,810 ‫solicite, responda y siguiente, y ahora déjelas aquí registrarlas en la consola. 152 00:08:50,620 --> 00:08:53,840 ‫Muy bien, y en caso de que tengamos varios archivos, 153 00:08:53,840 --> 00:08:58,520 ‫en realidad se trata de archivos de puntos de solicitud, y no solo de archivos. 154 00:08:58,520 --> 00:08:59,610 ‫¿Está bien? 155 00:08:59,610 --> 00:09:02,460 ‫Entonces, esto aquí básicamente producirá un 156 00:09:04,030 --> 00:09:07,870 ‫archivo de puntos de solicitud, mientras que los campos y 157 00:09:07,870 --> 00:09:12,603 ‫la matriz producirán archivos de puntos de solicitud, por lo que el plural. 158 00:09:14,215 --> 00:09:16,420 ‫Muy bien, entonces registre esto en 159 00:09:16,420 --> 00:09:19,690 ‫la consola y luego llamemos al siguiente aquí 160 00:09:19,690 --> 00:09:21,440 ‫para que podamos 161 00:09:21,440 --> 00:09:25,000 ‫terminar más tarde el ciclo de solicitud-respuesta, de acuerdo. 162 00:09:25,000 --> 00:09:26,730 ‫Guárdelo y ahora todo 163 00:09:26,730 --> 00:09:29,700 ‫lo que tenemos que hacer para probar la solicitud 164 00:09:29,700 --> 00:09:32,790 ‫es agregar estos dos nuevos middlewares al controlador de ruta. 165 00:09:32,790 --> 00:09:37,130 ‫Muy bien, recorridos recorridos y, al igual que con los usuarios, 166 00:09:37,130 --> 00:09:39,600 ‫para simplificarlo, solo permitiremos subir imágenes 167 00:09:39,600 --> 00:09:41,953 ‫en una actualización del recorrido. 168 00:09:43,360 --> 00:09:48,360 ‫Así que aquí es donde tenemos esa solicitud de parche, de acuerdo, y ya 169 00:09:49,280 --> 00:09:52,320 ‫tenemos un montón de middlewares, así que 170 00:09:52,320 --> 00:09:56,180 ‫proteja, restrinja a los administradores y guías, y ahora también 171 00:09:56,180 --> 00:10:01,180 ‫agreguemos las imágenes del recorrido de carga de puntos del controlador de recorrido y 172 00:10:03,160 --> 00:10:08,160 ‫el recorrido de cambio de tamaño de punto del controlador de recorrido imágenes. 173 00:10:08,360 --> 00:10:13,130 ‫Así que aquí hay una buena pila de middleware, ¿de acuerdo? 174 00:10:13,130 --> 00:10:16,000 ‫Y creo que ahora estamos listos 175 00:10:16,000 --> 00:10:18,890 ‫para probar la solicitud que creamos aquí. 176 00:10:18,890 --> 00:10:21,830 ‫Y nuevamente, por supuesto, no va a hacer nada, 177 00:10:21,830 --> 00:10:24,500 ‫no va a guardar estas imágenes en ningún lado 178 00:10:24,500 --> 00:10:26,780 ‫y tampoco actualizar la base de 179 00:10:26,780 --> 00:10:30,453 ‫datos, pero por ahora solo queremos ver el resultado en la consola. 180 00:10:31,370 --> 00:10:34,290 ‫Bueno, debería haber actualizado el precio, así que 181 00:10:34,290 --> 00:10:37,010 ‫echemos un vistazo rápido a eso. 182 00:10:37,010 --> 00:10:39,790 ‫Sí, el precio ahora se actualizó, 183 00:10:39,790 --> 00:10:43,200 ‫pero nuevamente las imágenes obviamente no, ¿de acuerdo? 184 00:10:43,200 --> 00:10:46,810 ‫Y ahora aquí los tenemos en la consola, así que 185 00:10:46,810 --> 00:10:49,843 ‫hagámoslo un poco más grande y aquí tenemos 186 00:10:49,843 --> 00:10:53,400 ‫la portada de la imagen donde obtuvimos el nombre del 187 00:10:53,400 --> 00:10:56,520 ‫campo, el nombre original y también el tipo MIME, 188 00:10:56,520 --> 00:11:00,620 ‫está bien, entonces ves el búfer aquí. , por lo que 189 00:11:00,620 --> 00:11:03,230 ‫esta es básicamente una representación de la 190 00:11:03,230 --> 00:11:05,240 ‫imagen en la memoria. 191 00:11:05,240 --> 00:11:06,810 ‫Ahora es importante tener en 192 00:11:06,810 --> 00:11:10,953 ‫cuenta que, en realidad, incluso la portada de la imagen es una matriz, ¿de acuerdo? 193 00:11:12,290 --> 00:11:13,590 ‫Entonces, cuando recuperemos 194 00:11:13,590 --> 00:11:16,480 ‫la imagen de la portada de la imagen, 195 00:11:16,480 --> 00:11:19,660 ‫tendremos que usar el primer elemento de esta matriz. 196 00:11:19,660 --> 00:11:22,380 ‫Y luego, en las imágenes, aquí es obvio 197 00:11:22,380 --> 00:11:24,700 ‫que tenemos una matriz y aquí 198 00:11:24,700 --> 00:11:28,080 ‫para cada una de las imágenes tenemos un objeto como este. 199 00:11:28,080 --> 00:11:32,530 ‫Entonces, con el nombre original, gira cuatro, tres y dos, y luego cada uno 200 00:11:32,530 --> 00:11:34,363 ‫de ellos como un búfer. 201 00:11:36,030 --> 00:11:40,860 ‫De acuerdo, todo está muy bien conectado y todo lo que tenemos que 202 00:11:40,860 --> 00:11:45,353 ‫hacer ahora es básicamente crear estas imágenes de recorrido de cambio de 203 00:11:46,290 --> 00:11:49,300 ‫tamaño, porque aquí es donde las imágenes 204 00:11:49,300 --> 00:11:51,290 ‫se procesarán y también se 205 00:11:51,290 --> 00:11:53,210 ‫guardarán en el disco. 206 00:11:53,210 --> 00:11:56,903 ‫De acuerdo, ese es el tema de la próxima conferencia.