1 00:00:01,140 --> 00:00:03,990 ‫Narator: Jadi sekarang setelah fitur unggah 2 00:00:03,990 --> 00:00:08,080 ‫foto pengguna selesai, sekarang mari kita pelajari cara mengunggah 3 00:00:08,080 --> 00:00:10,080 ‫banyak file sekaligus 4 00:00:10,080 --> 00:00:13,170 ‫dan juga cara memproses banyak gambar sekaligus. 5 00:00:13,170 --> 00:00:15,430 ‫Jadi dalam kuliah ini dan 6 00:00:15,430 --> 00:00:18,713 ‫kuliah berikutnya, kita akan mengupload dan memproses gambar tur. 7 00:00:20,770 --> 00:00:23,750 ‫Dan untuk memulai, mari kita ingat jenis gambar apa 8 00:00:23,750 --> 00:00:28,070 ‫yang kita inginkan untuk tur kita dan juga berapa banyak, jadi kita 9 00:00:28,070 --> 00:00:31,033 ‫harus melihat model tur kita di sini. 10 00:00:32,450 --> 00:00:37,450 ‫Jadi di sini kita memiliki sampul gambar dan itu sebenarnya 11 00:00:38,050 --> 00:00:40,170 ‫hanya satu gambar 12 00:00:40,170 --> 00:00:42,400 ‫dan kemudian kita juga memiliki 13 00:00:42,400 --> 00:00:45,610 ‫bidang gambar yang akan menjadi larik gambar. 14 00:00:45,610 --> 00:00:48,390 ‫Dan biasanya ini harus setidaknya tiga gambar karena 15 00:00:48,390 --> 00:00:51,000 ‫itu adalah jumlah gambar yang kami miliki 16 00:00:51,000 --> 00:00:52,950 ‫di halaman detail tur. 17 00:00:52,950 --> 00:00:53,810 ‫Benar? 18 00:00:53,810 --> 00:00:56,010 ‫Jadi sekali lagi, kita akan 19 00:00:56,010 --> 00:00:58,290 ‫memiliki sampul gambar dan gambar sebagai array. 20 00:00:58,290 --> 00:00:59,410 ‫Baiklah. 21 00:00:59,410 --> 00:01:01,240 ‫Sekarang cara kita 22 00:01:01,240 --> 00:01:04,080 ‫akan mengunggah dan memproses gambar-gambar ini akan 23 00:01:04,080 --> 00:01:06,140 ‫sangat mirip dengan apa yang 24 00:01:06,140 --> 00:01:09,620 ‫kita lakukan dengan pengguna, jadi mari kita masuk 25 00:01:09,620 --> 00:01:13,444 ‫ke pengontrol pengguna dan menyalin setidaknya bagian awal ini 26 00:01:13,444 --> 00:01:15,820 ‫di sini dari konfigurasi multi. 27 00:01:15,820 --> 00:01:18,620 ‫Baiklah, jadi ambil itu dan kemudian 28 00:01:18,620 --> 00:01:21,883 ‫di pengontrol tur, di sini di atas, 29 00:01:23,130 --> 00:01:25,774 ‫mari letakkan di sini 30 00:01:25,774 --> 00:01:29,293 ‫dan juga dapatkan kebutuhan multer dan sharp. 31 00:01:33,410 --> 00:01:37,610 ‫Baiklah. 32 00:01:37,610 --> 00:01:39,850 ‫Dan sama seperti sebelumnya 33 00:01:39,850 --> 00:01:42,750 ‫kita akan menyimpan gambar dalam memori, baiklah, 34 00:01:42,750 --> 00:01:46,900 ‫dan juga kita hanya mengizinkan gambar melewati filter kita. 35 00:01:46,900 --> 00:01:51,720 ‫Jadi dengan kata lain kita hanya ingin bisa mengupload gambar saja. 36 00:01:51,720 --> 00:01:52,553 ‫Baiklah. 37 00:01:52,553 --> 00:01:54,670 ‫Kemudian di sini kita membuat atau 38 00:01:54,670 --> 00:01:57,060 ‫mengunggah dengan cara yang sama persis seperti 39 00:01:57,060 --> 00:01:58,180 ‫sebelumnya, jadi 40 00:01:58,180 --> 00:02:01,420 ‫sekarang mari kita benar-benar membuat middleware dari unggahan ini. 41 00:02:01,420 --> 00:02:02,780 ‫Baiklah. 42 00:02:02,780 --> 00:02:07,780 ‫Jadi ekspor dot unggah tur, gambar, lalu unggah. 43 00:02:12,540 --> 00:02:14,536 ‫Dan sekarang inilah bagian 44 00:02:14,536 --> 00:02:17,020 ‫yang berbeda, jadi sesuatu yang akan 45 00:02:17,020 --> 00:02:19,650 ‫berbeda dengan apa yang kami lakukan 46 00:02:19,650 --> 00:02:24,380 ‫di sini di pengontrol pengguna karena kami telah mengunggah dot single. 47 00:02:24,380 --> 00:02:25,213 ‫Oke. 48 00:02:25,213 --> 00:02:28,110 ‫Dan itu karena kami hanya memiliki satu 49 00:02:28,110 --> 00:02:30,000 ‫bidang dengan file yang 50 00:02:30,000 --> 00:02:32,930 ‫ingin kami unggah dan inilah nama bidang itu. 51 00:02:32,930 --> 00:02:33,763 ‫Benar? 52 00:02:33,763 --> 00:02:36,150 ‫Tapi sekarang kami benar-benar memiliki banyak file dan 53 00:02:36,150 --> 00:02:38,490 ‫di salah satunya kami memiliki satu gambar 54 00:02:38,490 --> 00:02:40,920 ‫dan di yang lain kami memiliki tiga gambar. 55 00:02:40,920 --> 00:02:42,537 ‫Jadi, bagaimana kita bisa melakukannya? 56 00:02:42,537 --> 00:02:47,010 ‫Yah, kita akan menggunakan bidang titik unggah, dan 57 00:02:47,010 --> 00:02:49,850 ‫muller sebenarnya sangat mampu menangani 58 00:02:49,850 --> 00:02:52,280 ‫situasi seperti ini. 59 00:02:52,280 --> 00:02:54,570 ‫Jadi di sini kita melewati sebuah 60 00:02:54,570 --> 00:02:57,520 ‫array dan masing-masing elemen adalah objek di mana kita 61 00:02:57,520 --> 00:02:59,283 ‫kemudian menentukan nama bidang. 62 00:03:01,020 --> 00:03:02,420 ‫Jadi yang pertama, 63 00:03:02,420 --> 00:03:07,420 ‫ingat, adalah sampul gambar, dan kemudian kita katakan bahwa jumlah maksimalnya adalah satu. 64 00:03:09,920 --> 00:03:11,820 ‫Dan itu berarti kita 65 00:03:11,820 --> 00:03:14,220 ‫hanya bisa memiliki satu bidang yang 66 00:03:14,220 --> 00:03:16,730 ‫disebut sampul gambar, yang kemudian akan diproses. 67 00:03:16,730 --> 00:03:20,163 ‫Baiklah, dan kemudian mari kita lakukan hal yang sama untuk gambar kita, 68 00:03:21,910 --> 00:03:24,210 ‫jadi itu adalah bidang lain dalam database 69 00:03:24,210 --> 00:03:26,300 ‫kita dan jadi di sini kita 70 00:03:27,400 --> 00:03:30,683 ‫menyebutnya gambar juga dan di sini katakanlah jumlah maksimalnya adalah tiga. 71 00:03:31,950 --> 00:03:32,783 ‫Baiklah. 72 00:03:34,440 --> 00:03:37,350 ‫Dan jika kita tidak memiliki sampul gambar dan 73 00:03:37,350 --> 00:03:41,340 ‫jika itu hanya memiliki satu bidang yang menerima banyak gambar 74 00:03:41,340 --> 00:03:43,870 ‫atau beberapa file sekaligus, kita bisa 75 00:03:43,870 --> 00:03:45,483 ‫melakukannya seperti ini. 76 00:03:46,990 --> 00:03:51,910 ‫Jadi kita akan menggunakan upload dot array, oke? 77 00:03:51,910 --> 00:03:53,460 ‫Dan kemudian nama 78 00:03:55,920 --> 00:04:00,730 ‫bidang, dan pada dasarnya jumlah maksimum di sini sebagai angka seperti ini. 79 00:04:00,730 --> 00:04:01,640 ‫Baiklah? 80 00:04:01,640 --> 00:04:06,120 ‫Jadi ketika hanya ada satu, maka itu mengunggah dot tunggal, katakanlah gambar, 81 00:04:09,520 --> 00:04:13,240 ‫ketika ada beberapa dengan nama yang sama, maka itu mengunggah 82 00:04:13,240 --> 00:04:16,330 ‫dot array dan ketika pada dasarnya ada campurannya, 83 00:04:16,330 --> 00:04:19,303 ‫maka itu adalah mengunggah bidang titik. 84 00:04:21,330 --> 00:04:22,750 ‫Oke? 85 00:04:22,750 --> 00:04:25,300 ‫Sekarang mungkin ini terlihat agak 86 00:04:25,300 --> 00:04:28,320 ‫rumit sekarang, jadi sebelum kita melanjutkan 87 00:04:28,320 --> 00:04:31,630 ‫benar-benar mereplikasi kueri semacam ini di Postman, oke? 88 00:04:31,630 --> 00:04:33,750 ‫Dan sebenarnya sebelum kita melakukan itu, 89 00:04:33,750 --> 00:04:35,523 ‫kita perlu membuat tur baru. 90 00:04:37,190 --> 00:04:39,280 ‫Baiklah, dan sebenarnya saya akan melakukannya 91 00:04:39,280 --> 00:04:42,490 ‫di sini di kompas hanya dengan menduplikasi salah satu 92 00:04:42,490 --> 00:04:44,330 ‫tur yang sudah kita miliki. 93 00:04:44,330 --> 00:04:46,623 ‫Jadi katakanlah di sini, Sea Explorer, 94 00:04:47,920 --> 00:04:49,680 ‫dan sekarang saya menduplikasinya. 95 00:04:49,680 --> 00:04:53,780 ‫Jadi di sini saya dapat mengubah apa yang ingin 96 00:04:53,780 --> 00:04:56,743 ‫saya bedakan dan yang ini disebut 97 00:04:59,270 --> 00:05:04,263 ‫The Mountain Biker, katakanlah durasi lima, ukuran grup maksimal sepuluh, dan 98 00:05:05,190 --> 00:05:08,120 ‫kemudian yang terpenting adalah menyingkirkan sampul 99 00:05:08,120 --> 00:05:12,840 ‫gambar karena itulah yang kami ingin memperbarui nanti dan juga 100 00:05:12,840 --> 00:05:14,453 ‫array gambar. 101 00:05:15,640 --> 00:05:20,300 ‫Dibuat di bisa juga pergi dan tentu 102 00:05:20,300 --> 00:05:25,300 ‫saja kita perlu mengganti siput, jadi biker gunung. 103 00:05:27,780 --> 00:05:28,710 ‫Oke? 104 00:05:28,710 --> 00:05:30,390 ‫Dan omong-omong, kami 105 00:05:30,390 --> 00:05:34,200 ‫perlu membuat tur baru seperti ini sehingga kami benar-benar memiliki 106 00:05:34,200 --> 00:05:36,970 ‫lokasi, ringkasan dan deskripsi, dan semua itu, 107 00:05:36,970 --> 00:05:41,030 ‫sehingga turis dapat merender dengan benar di situs web kami. 108 00:05:41,030 --> 00:05:44,770 ‫Baiklah, jadi mari kita masukkan dan itu seharusnya 109 00:05:44,770 --> 00:05:49,270 ‫ada di suatu tempat di sini tepat di akhir, oke. 110 00:05:49,270 --> 00:05:54,270 ‫Jadi mari ambil ID di sini dan sekarang di 111 00:05:55,070 --> 00:05:59,020 ‫sini di Postman, mari perbarui tur. 112 00:05:59,020 --> 00:06:02,960 ‫Jadi kita meneruskannya di sini dan sekarang di tubuh 113 00:06:02,960 --> 00:06:07,960 ‫kita, mari kita ingat bahwa kita perlu mengubah dari mentah menjadi data bentuk. 114 00:06:08,104 --> 00:06:09,103 ‫Oke? 115 00:06:11,490 --> 00:06:16,490 ‫Mari kita tutup semua ini di sini dan juga izinkan login di 116 00:06:17,090 --> 00:06:20,210 ‫sini sebagai admin karena jika tidak, memperbarui 117 00:06:20,210 --> 00:06:22,010 ‫tur tidak akan berfungsi. 118 00:06:23,070 --> 00:06:28,070 ‫Jadi admin@nators. io, baiklah. 119 00:06:31,740 --> 00:06:35,508 ‫Jadi sekarang mari kita buat ulang permintaan tubuh di sini mirip dengan 120 00:06:35,508 --> 00:06:38,210 ‫yang baru saja kita tentukan di sini. 121 00:06:38,210 --> 00:06:42,070 ‫Jadi pada dasarnya mirip dengan apa yang diharapkan multi-upload kami, 122 00:06:42,070 --> 00:06:44,973 ‫jadi satu sampul gambar dan tiga gambar. 123 00:06:47,060 --> 00:06:52,060 ‫Jadi, sampul gambar, yang merupakan file, dan mari kita pilih itu. 124 00:06:55,670 --> 00:06:58,630 ‫Jadi di sini kita memiliki foto-foto baru untuk 125 00:06:59,660 --> 00:07:02,050 ‫tur dan mari kita benar-benar menggunakan 126 00:07:02,050 --> 00:07:05,837 ‫yang pertama ini di sini sebagai gambar sampul dan kemudian 127 00:07:08,450 --> 00:07:12,290 ‫gambar, mari kita taruh di sini untuk arsip juga, dan 128 00:07:12,290 --> 00:07:14,543 ‫kemudian di sini tiga lainnya. 129 00:07:16,420 --> 00:07:19,943 ‫Dan sekarang seperti yang Anda lihat, semuanya akan disebut gambar. 130 00:07:26,440 --> 00:07:29,940 ‫Oke, dan kita hanya dapat memiliki maksimal tiga, setidaknya 131 00:07:29,940 --> 00:07:32,070 ‫hanya tiga dari mereka 132 00:07:32,070 --> 00:07:34,680 ‫yang akan diproses oleh multi, oke? 133 00:07:37,620 --> 00:07:40,490 ‫Dan sebenarnya di sini Anda melihat bahwa kami benar-benar 134 00:07:40,490 --> 00:07:43,380 ‫perlu mengubah ukuran yang satu ini karena di situs 135 00:07:43,380 --> 00:07:46,090 ‫web kami semuanya muncul dalam format lanskap dan bukan 136 00:07:46,090 --> 00:07:48,550 ‫potret seperti yang kami miliki di sini. 137 00:07:48,550 --> 00:07:49,383 ‫Baiklah? 138 00:07:49,383 --> 00:07:51,139 ‫Dan tentu 139 00:07:51,139 --> 00:07:55,940 ‫saja itulah mengapa perlu juga memproses gambar-gambar ini, oke? 140 00:07:55,940 --> 00:07:58,590 ‫Dan tentu saja kita juga dapat 141 00:07:58,590 --> 00:08:03,563 ‫mengubah hal-hal lain di sini, jadi katakanlah kita ingin mengubah harga menjadi 9-9-7, oke? 142 00:08:05,610 --> 00:08:09,690 ‫Sekarang, saya tidak akan mengirim permintaan ini dulu karena 143 00:08:09,690 --> 00:08:12,500 ‫kami tidak memiliki logika yang diterapkan 144 00:08:12,500 --> 00:08:15,280 ‫untuk menanganinya pada saat ini, benar, 145 00:08:15,280 --> 00:08:17,260 ‫karena kami tidak benar-benar 146 00:08:17,260 --> 00:08:21,360 ‫mengunggahnya ke sistem file, tetapi hanya menyimpannya ke memori . 147 00:08:21,360 --> 00:08:23,870 ‫Jadi untuk melihatnya dengan 148 00:08:23,870 --> 00:08:26,808 ‫cepat, mari kita buat middleware berikutnya 149 00:08:26,808 --> 00:08:29,913 ‫di sini, yang akan memproses gambar-gambar ini. 150 00:08:31,250 --> 00:08:36,250 ‫Jadi ekspor gambar tur pengubahan ukuran titik, jadi permintaan, tanggapan, 151 00:08:42,810 --> 00:08:47,810 ‫dan selanjutnya, dan sekarang mari kita log ke konsol. 152 00:08:50,620 --> 00:08:53,840 ‫Baiklah, dan jika kita memiliki banyak 153 00:08:53,840 --> 00:08:58,520 ‫file, itu sebenarnya adalah file titik permintaan, dan bukan hanya file. 154 00:08:58,520 --> 00:08:59,610 ‫Baiklah? 155 00:08:59,610 --> 00:09:02,460 ‫Jadi ini di sini pada 156 00:09:04,030 --> 00:09:07,870 ‫dasarnya akan menghasilkan file titik permintaan sedangkan bidang 157 00:09:07,870 --> 00:09:12,603 ‫dan array keduanya akan menghasilkan file titik permintaan, jadi jamaknya. 158 00:09:14,215 --> 00:09:16,420 ‫Baiklah, jadi kemudian log ini 159 00:09:16,420 --> 00:09:19,690 ‫ke konsol dan kemudian juga memungkinkan panggilan berikutnya 160 00:09:19,690 --> 00:09:21,440 ‫di sini sehingga 161 00:09:21,440 --> 00:09:25,000 ‫kita benar-benar dapat menyelesaikan siklus permintaan-tanggapan nanti, oke. 162 00:09:25,000 --> 00:09:26,730 ‫Simpan dan sekarang yang 163 00:09:26,730 --> 00:09:29,700 ‫perlu kita lakukan untuk benar-benar menguji permintaan adalah 164 00:09:29,700 --> 00:09:32,790 ‫menambahkan dua middleware baru ini ke pengendali rute. 165 00:09:32,790 --> 00:09:37,130 ‫Baiklah, jadi rute tur dan seperti halnya dengan pengguna, untuk membuatnya 166 00:09:37,130 --> 00:09:39,600 ‫tetap sederhana di sini, kami hanya mengizinkan 167 00:09:39,600 --> 00:09:41,953 ‫pengunggahan gambar pada pembaruan tur. 168 00:09:43,360 --> 00:09:48,360 ‫Jadi di sinilah kami memiliki permintaan tambalan itu, baiklah, dan 169 00:09:49,280 --> 00:09:52,320 ‫jadi kami sudah memiliki banyak 170 00:09:52,320 --> 00:09:56,180 ‫middlewares, jadi lindungi, batasi untuk admin dan 171 00:09:56,180 --> 00:10:01,180 ‫pemandu, dan sekarang mari juga tambahkan pengontrol tur dot unggah 172 00:10:03,160 --> 00:10:08,160 ‫gambar tur dan pengontrol tur dot resize tur gambar-gambar. 173 00:10:08,360 --> 00:10:13,130 ‫Jadi itu tumpukan middleware yang sangat bagus di sini, oke? 174 00:10:13,130 --> 00:10:16,000 ‫Jadi saya pikir sekarang kami siap untuk 175 00:10:16,000 --> 00:10:18,890 ‫benar-benar menguji permintaan yang kami buat di sini. 176 00:10:18,890 --> 00:10:21,830 ‫Dan lagi tentu saja itu tidak akan melakukan apa-apa, 177 00:10:21,830 --> 00:10:24,500 ‫itu tidak akan menyimpan gambar-gambar ini di mana 178 00:10:24,500 --> 00:10:26,780 ‫saja dan juga tidak memperbarui database 179 00:10:26,780 --> 00:10:30,453 ‫tetapi untuk saat ini kami hanya ingin melihat hasilnya di konsol. 180 00:10:31,370 --> 00:10:34,290 ‫Yah itu seharusnya benar-benar memperbarui harga jadi 181 00:10:34,290 --> 00:10:37,010 ‫mari kita lihat dengan cepat. 182 00:10:37,010 --> 00:10:39,790 ‫Ya, jadi harganya sekarang diperbarui 183 00:10:39,790 --> 00:10:43,200 ‫tetapi sekali lagi gambarnya jelas tidak, oke? 184 00:10:43,200 --> 00:10:46,810 ‫Dan sekarang di sini kita memilikinya di konsol, jadi 185 00:10:46,810 --> 00:10:49,843 ‫mari kita membuatnya sedikit lebih besar dan 186 00:10:49,843 --> 00:10:53,400 ‫di sini kita memiliki sampul gambar di mana 187 00:10:53,400 --> 00:10:56,520 ‫kita mendapatkan nama bidang, nama asli, dan 188 00:10:56,520 --> 00:11:00,620 ‫juga mimetype, oke, kemudian Anda melihat buffernya di sini , 189 00:11:00,620 --> 00:11:03,230 ‫dan pada dasarnya ini adalah representasi 190 00:11:03,230 --> 00:11:05,240 ‫dari gambar dalam memori. 191 00:11:05,240 --> 00:11:06,810 ‫Sekarang penting di 192 00:11:06,810 --> 00:11:10,953 ‫sini untuk dicatat bahwa sebenarnya sampul gambar adalah array, oke? 193 00:11:12,290 --> 00:11:13,590 ‫Jadi ketika 194 00:11:13,590 --> 00:11:16,480 ‫kita akan mengambil gambar dari sampul gambar, 195 00:11:16,480 --> 00:11:19,660 ‫kita harus menggunakan elemen pertama dari array ini. 196 00:11:19,660 --> 00:11:22,380 ‫Dan kemudian di gambar, di sini jelas bahwa 197 00:11:22,380 --> 00:11:24,700 ‫kita memiliki array dan di 198 00:11:24,700 --> 00:11:28,080 ‫sini untuk setiap gambar, kita memiliki objek seperti ini. 199 00:11:28,080 --> 00:11:32,530 ‫Jadi dengan nama aslinya, tour empat, tiga dan dua, lalu 200 00:11:32,530 --> 00:11:34,363 ‫masing-masing sebagai penyangga. 201 00:11:36,030 --> 00:11:40,860 ‫Baiklah, jadi semuanya terhubung dengan baik dan sekarang yang perlu 202 00:11:40,860 --> 00:11:45,353 ‫kita lakukan pada dasarnya adalah membuat gambar tur pengubahan 203 00:11:46,290 --> 00:11:49,300 ‫ukuran ini, karena di sinilah gambar 204 00:11:49,300 --> 00:11:51,290 ‫akan diproses dan juga 205 00:11:51,290 --> 00:11:53,210 ‫disimpan ke disk. 206 00:11:53,210 --> 00:11:56,903 ‫Oke, dan begitulah topik kuliah selanjutnya.