1 00:00:01,170 --> 00:00:03,440 ‫Narator: Pada bagian pertama dari 2 00:00:03,440 --> 00:00:06,140 ‫bagian ini kita akan mempelajari semua tentang 3 00:00:06,140 --> 00:00:09,660 ‫mengunggah gambar dengan paket Multer dan dalam video khusus 4 00:00:09,660 --> 00:00:13,653 ‫ini kita akan mulai mengimplementasikan unggahan gambar untuk foto pengguna. 5 00:00:15,230 --> 00:00:18,900 ‫Tetapi sebelum kita mulai, mari kita lakukan pembersihan cepat 6 00:00:18,900 --> 00:00:22,450 ‫di sini dan singkirkan keluaran konstan dari cookie yang 7 00:00:22,450 --> 00:00:24,570 ‫kita miliki di sini. 8 00:00:24,570 --> 00:00:29,093 ‫Jadi itu di suatu tempat di sini dan itu jauh lebih baik. 9 00:00:30,430 --> 00:00:33,610 ‫Sekarang kita akan bekerja mengunggah foto 10 00:00:33,610 --> 00:00:38,010 ‫pengguna dan mari kita buka di sini rute pengguna, oke. 11 00:00:38,010 --> 00:00:41,310 ‫Jadi, Multer adalah middleware yang sangat populer untuk 12 00:00:41,310 --> 00:00:45,510 ‫menangani data formulir multi-bagian, yang merupakan formulir dalam pengkodean yang 13 00:00:45,510 --> 00:00:48,540 ‫digunakan untuk mengunggah file dari formulir. 14 00:00:48,540 --> 00:00:51,200 ‫Jadi ingat bagaimana di bagian terakhir 15 00:00:51,200 --> 00:00:55,160 ‫kami menggunakan formulir yang disandikan URL untuk memperbarui data pengguna 16 00:00:55,160 --> 00:00:58,570 ‫dan untuk itu kami juga harus menyertakan middleware khusus. 17 00:00:58,570 --> 00:01:01,000 ‫Jadi Multer pada dasarnya 18 00:01:01,000 --> 00:01:03,580 ‫adalah middleware untuk data formulir multi-bagian. 19 00:01:03,580 --> 00:01:05,770 ‫Dan sekarang inilah yang akan kita lakukan. 20 00:01:05,770 --> 00:01:08,460 ‫Kami akan mengizinkan pengguna untuk mengunggah 21 00:01:08,460 --> 00:01:11,064 ‫foto di rute Perbarui 22 00:01:11,064 --> 00:01:14,430 ‫Saya, sehingga alih-alih hanya dapat memperbarui email 23 00:01:14,430 --> 00:01:18,620 ‫dan foto, pengguna juga dapat mengunggah foto pengguna mereka. 24 00:01:18,620 --> 00:01:21,970 ‫Jadi sekali lagi, mari kita mulai 25 00:01:21,970 --> 00:01:25,330 ‫dengan menginstal paket yang kita butuhkan dan sebenarnya 26 00:01:25,330 --> 00:01:30,267 ‫mari kita buat jendela terminal baru di sini dan NPM menginstal Multer. 27 00:01:32,586 --> 00:01:37,437 ‫Baiklah dan di sini kita melihat bahwa kita berada di Multer 1. 4. 1. 28 00:01:38,420 --> 00:01:41,160 ‫Dan sekali lagi jika Anda mengalami masalah dengan paket 29 00:01:41,160 --> 00:01:43,490 ‫ini, harap pastikan bahwa Anda menginstal versi 30 00:01:43,490 --> 00:01:45,983 ‫yang sama seperti yang saya gunakan di sini. 31 00:01:47,241 --> 00:01:48,074 ‫Baiklah. 32 00:01:49,150 --> 00:01:51,313 ‫Jadi, mari kita sertakan itu di sini. 33 00:01:52,930 --> 00:01:57,070 ‫Jadi Multer, minta, Multer. 34 00:01:58,840 --> 00:02:03,040 ‫Jadi, mudah dan sekarang kita perlu mengonfigurasi apa yang disebut 35 00:02:03,040 --> 00:02:05,780 ‫unggahan Multer dan kemudian menggunakannya. 36 00:02:05,780 --> 00:02:08,030 ‫Dan mari lakukan itu di sini 37 00:02:09,330 --> 00:02:14,330 ‫di awal dan sebut saja Unggah dan kita panggil fungsi Multer yang baru 38 00:02:16,380 --> 00:02:19,090 ‫saja kita sertakan sebelumnya dan kemudian berikan 39 00:02:19,090 --> 00:02:21,160 ‫objek untuk beberapa opsi. 40 00:02:21,160 --> 00:02:23,730 ‫Dan untuk saat ini satu-satunya 41 00:02:23,730 --> 00:02:26,180 ‫pilihan yang akan kita 42 00:02:26,180 --> 00:02:31,180 ‫tentukan adalah tujuan dan saya akan mengaturnya ke Publik/gambar/pengguna, baiklah. 43 00:02:34,940 --> 00:02:36,870 ‫Dan itulah folder tempat kita 44 00:02:36,870 --> 00:02:38,780 ‫ingin menyimpan semua gambar 45 00:02:38,780 --> 00:02:40,570 ‫yang sedang diunggah. 46 00:02:40,570 --> 00:02:45,570 ‫Jadi di sini, Publik, Gambar dan Pengguna, seperti semua gambar 47 00:02:45,740 --> 00:02:48,063 ‫untuk semua pengguna yang 48 00:02:48,063 --> 00:02:50,750 ‫sudah kami miliki di database kami. 49 00:02:50,750 --> 00:02:53,770 ‫Benar dan tentu saja kita dapat mengonfigurasi ini 50 00:02:53,770 --> 00:02:56,480 ‫dengan cara yang jauh lebih kompleks dan 51 00:02:56,480 --> 00:02:58,670 ‫kita akan melakukannya di kuliah 52 00:02:58,670 --> 00:03:02,190 ‫berikutnya, tetapi untuk saat ini saya benar-benar ingin Anda memperkenalkan 53 00:03:02,190 --> 00:03:04,697 ‫paket ini dan omong-omong, kita sebenarnya bisa 54 00:03:04,697 --> 00:03:08,010 ‫menelepon fungsi Multer tanpa opsi apa pun di sana. 55 00:03:08,010 --> 00:03:10,940 ‫Jadi tanpa ini di sini dan kemudian gambar yang 56 00:03:10,940 --> 00:03:13,749 ‫diunggah hanya akan disimpan dalam memori dan tidak 57 00:03:13,749 --> 00:03:17,590 ‫disimpan di mana pun ke disk, tetapi tentu saja pada saat ini bukan 58 00:03:17,590 --> 00:03:21,290 ‫itu yang kita inginkan dan setidaknya kita perlu menentukan opsi tujuan ini. 59 00:03:21,290 --> 00:03:23,620 ‫Dan dengan ini file kami kemudian 60 00:03:23,620 --> 00:03:26,450 ‫benar-benar diunggah ke direktori di sistem file kami. 61 00:03:26,450 --> 00:03:29,080 ‫Dan saya telah menyebutkan ini sebelumnya, 62 00:03:29,080 --> 00:03:31,960 ‫tetapi mari kita pastikan bahwa kita berada di 63 00:03:31,960 --> 00:03:34,870 ‫halaman yang sama tentang ini, yaitu bahwa tentu saja 64 00:03:34,870 --> 00:03:37,770 ‫gambar tidak langsung diunggah ke database, kita hanya 65 00:03:37,770 --> 00:03:40,700 ‫mengunggahnya ke sistem file kita dan kemudian di database 66 00:03:40,700 --> 00:03:43,510 ‫kita menempatkan link pada dasarnya ke gambar itu. 67 00:03:43,510 --> 00:03:46,170 ‫Jadi dalam hal ini di setiap dokumen 68 00:03:46,170 --> 00:03:49,450 ‫pengguna kita harus memberi nama semua file yang diunggah, oke. 69 00:03:49,450 --> 00:03:51,690 ‫Sekarang sekali lagi, kami tidak melakukan itu di video 70 00:03:51,690 --> 00:03:53,550 ‫ini tetapi kami akan melakukannya nanti. 71 00:03:53,550 --> 00:03:55,603 ‫Untuk saat ini mari kita buat ini berhasil. 72 00:03:56,490 --> 00:03:59,000 ‫Bagaimanapun, yang perlu kita lakukan sekarang adalah 73 00:03:59,000 --> 00:04:02,150 ‫menggunakan unggahan ini di sini untuk benar-benar membuat fungsi middleware yang 74 00:04:02,150 --> 00:04:05,223 ‫dapat kita masukkan di sini ke dalam rute Perbarui Saya. 75 00:04:06,100 --> 00:04:09,343 ‫Jadi di sini, dan itu bekerja seperti ini. 76 00:04:10,700 --> 00:04:14,670 ‫Jadi upload, dot single, dan single karena disini kita hanya ingin 77 00:04:14,670 --> 00:04:17,810 ‫mengupdate satu gambar saja lalu disini menjadi single 78 00:04:17,810 --> 00:04:20,830 ‫kita lewati nama field yang akan menampung 79 00:04:20,830 --> 00:04:22,993 ‫gambar yang akan di upload. 80 00:04:24,000 --> 00:04:26,480 ‫Dan itu akan menjadi foto, oke. 81 00:04:26,480 --> 00:04:29,023 ‫Dan dengan bidang yang saya maksud 82 00:04:29,023 --> 00:04:31,620 ‫adalah bidang dalam formulir yang akan mengunggah gambar. 83 00:04:31,620 --> 00:04:34,400 ‫Baiklah, masuk akal? 84 00:04:34,400 --> 00:04:38,040 ‫Jadi sekali lagi, kami menyertakan paket Multer dan 85 00:04:38,040 --> 00:04:41,560 ‫kemudian dengan itu kami membuat unggahan. 86 00:04:41,560 --> 00:04:44,700 ‫Dan unggahan ini hanya untuk menentukan beberapa pengaturan 87 00:04:44,700 --> 00:04:48,640 ‫di mana dalam contoh ini kami hanya menentukan tujuan kemudian 88 00:04:48,640 --> 00:04:52,260 ‫kami menggunakan unggahan itu untuk membuat middleware baru yang 89 00:04:52,260 --> 00:04:55,560 ‫kemudian dapat kami tambahkan ke tumpukan rute yang ingin 90 00:04:55,560 --> 00:04:58,400 ‫kami gunakan untuk mengunggah file . 91 00:04:58,400 --> 00:05:01,130 ‫Jadi untuk itu kita katakan upload dot 92 00:05:01,130 --> 00:05:03,390 ‫single karena kita hanya memiliki 93 00:05:03,390 --> 00:05:06,160 ‫satu file tunggal dan akhirnya kita tentukan nama 94 00:05:06,160 --> 00:05:08,570 ‫field yang akan menampung file ini. 95 00:05:08,570 --> 00:05:11,600 ‫Oke, jadi middleware ini kemudian akan mengambil 96 00:05:11,600 --> 00:05:14,610 ‫file dan pada dasarnya menyalinnya ke 97 00:05:14,610 --> 00:05:16,960 ‫tujuan yang kita tentukan. 98 00:05:16,960 --> 00:05:19,040 ‫Dan setelah itu tentunya akan memanggil 99 00:05:19,040 --> 00:05:22,083 ‫middleware berikutnya yang ada di stack yaitu Update Me. 100 00:05:23,210 --> 00:05:26,470 ‫Juga, middleware ini di sini akan meletakkan file 101 00:05:26,470 --> 00:05:28,600 ‫atau setidaknya beberapa informasi 102 00:05:28,600 --> 00:05:30,810 ‫tentang file pada objek permintaan 103 00:05:30,810 --> 00:05:33,080 ‫dan jadi mari kita lihat itu. 104 00:05:33,080 --> 00:05:36,123 ‫Jadi mari kita pergi ke fungsi Update Me. 105 00:05:38,490 --> 00:05:42,320 ‫Jadi di sini dan di sini 106 00:05:43,300 --> 00:05:48,163 ‫di awal katakanlah konsol dot log, file reg dot. 107 00:05:49,630 --> 00:05:50,463 ‫Baiklah? 108 00:05:51,410 --> 00:05:55,430 ‫Dan juga saya ingin melihat tubuh. 109 00:05:55,430 --> 00:05:58,307 ‫Bagus dan dengan ini kami sekarang benar-benar siap 110 00:05:58,307 --> 00:06:02,320 ‫untuk menguji ini dan untuk saat ini kami akan mengujinya di 111 00:06:02,320 --> 00:06:04,820 ‫tukang pos tetapi tentu saja nanti 112 00:06:04,820 --> 00:06:08,253 ‫kami juga akan menambahkan fungsi ini ke formulir, baiklah. 113 00:06:09,220 --> 00:06:13,720 ‫Jadi mari kita pergi ke tukang pos di sini dan Perbarui Saya. 114 00:06:13,720 --> 00:06:16,023 ‫Jadi pada dasarnya untuk memperbarui pengguna saat ini. 115 00:06:17,380 --> 00:06:20,430 ‫Dan pengguna yang ingin saya perbarui bernama Leo, 116 00:06:20,430 --> 00:06:23,700 ‫jadi mari kita dapatkan dia di sini dari Kompas, 117 00:06:23,700 --> 00:06:26,710 ‫atau sebenarnya saya pikir itu tidak perlu 118 00:06:26,710 --> 00:06:30,460 ‫karena di login kami, kami sudah memiliki alamat email semacam 119 00:06:30,460 --> 00:06:35,010 ‫ini dan emailnya adalah leo@example. com dan 120 00:06:35,010 --> 00:06:38,090 ‫kata sandinya selalu sama. 121 00:06:38,090 --> 00:06:41,390 ‫Jadi tentu saja kita harus login terlebih dahulu sebagai pengguna 122 00:06:41,390 --> 00:06:44,653 ‫dan sekarang mari kita lanjutkan dan perbarui ke pengguna. 123 00:06:46,620 --> 00:06:50,010 ‫Jadi di dalam tubuh kita memiliki nama dan peran. 124 00:06:50,010 --> 00:06:53,593 ‫Jadi ayo kita update saja, sebut saja namanya disini. 125 00:06:54,560 --> 00:06:59,500 ‫Jadi nama saat ini adalah Leo Gillespie atau Gillespie, tidak 126 00:06:59,500 --> 00:07:01,113 ‫yakin bagaimana mengatakannya. 127 00:07:02,800 --> 00:07:07,800 ‫Mari kita tambahkan sesuatu di sini di tengah, oke. 128 00:07:07,870 --> 00:07:11,283 ‫Dan sekarang akhirnya kita tentukan properti foto, atau sebenarnya 129 00:07:13,270 --> 00:07:16,370 ‫kita seharusnya tidak melakukannya seperti ini tetapi 130 00:07:16,370 --> 00:07:21,100 ‫sebaliknya kita harus pergi ke sini untuk membentuk data, oke, karena ini 131 00:07:21,100 --> 00:07:22,810 ‫adalah cara bagaimana 132 00:07:22,810 --> 00:07:25,543 ‫kita dapat mengirim data formulir multi-bagian, baiklah. 133 00:07:26,410 --> 00:07:31,410 ‫Jadi, mari kita salin namanya saja di sini dan Name-nya. 134 00:07:33,470 --> 00:07:37,813 ‫Baiklah, jadi di sini kuncinya adalah Nama dan 135 00:07:37,813 --> 00:07:40,763 ‫kemudian nilainya adalah yang ini. 136 00:07:42,350 --> 00:07:46,770 ‫Selanjutnya, kita akhirnya menentukan bidang foto dan kemudian di sini kita 137 00:07:46,770 --> 00:07:50,210 ‫benar-benar dapat menentukan apa yang kita inginkan. 138 00:07:50,210 --> 00:07:52,700 ‫Jadi alih-alih teks yang merupakan default, kita 139 00:07:52,700 --> 00:07:56,520 ‫dapat menentukan file dan kemudian di sini kita dapat memilih file 140 00:07:56,520 --> 00:07:58,163 ‫yang ingin kita unggah. 141 00:07:59,240 --> 00:08:04,240 ‫Jadi file itu, gambar itu, ada di sini di data def kami lagi, lalu 142 00:08:04,350 --> 00:08:07,470 ‫di gambar dan kemudian di sini gambar Leo. 143 00:08:07,470 --> 00:08:10,430 ‫Dan itulah mengapa itu menunjukkan pengguna ini. 144 00:08:10,430 --> 00:08:13,800 ‫Oke, jadi klik buka dan sekarang saya pikir kami 145 00:08:13,800 --> 00:08:16,193 ‫siap untuk mengirim permintaan itu. 146 00:08:17,960 --> 00:08:22,200 ‫Baiklah, kami berhasil dan tentu saja seperti yang saya katakan sebelumnya, 147 00:08:22,200 --> 00:08:25,880 ‫foto itu jelas tidak diperbarui di sini di output basis 148 00:08:25,880 --> 00:08:28,450 ‫data karena itu untuk kuliah berikutnya. 149 00:08:28,450 --> 00:08:31,630 ‫Untuk saat ini kami hanya ingin benar-benar mengunggah gambar 150 00:08:31,630 --> 00:08:33,803 ‫ini ke folder yang kami tentukan. 151 00:08:34,960 --> 00:08:39,180 ‫Baiklah, sekarang mari kita lihat juga output kita dan jadi 152 00:08:39,180 --> 00:08:43,430 ‫di sini kita memiliki file titik permintaan, yang ini, dan 153 00:08:43,430 --> 00:08:46,460 ‫kita mendapatkan semua jenis informasi tentangnya. 154 00:08:46,460 --> 00:08:50,910 ‫Jadi nama aslinya, tujuan yang kita tentukan, nama file 155 00:08:50,910 --> 00:08:54,370 ‫baru di sini, dan juga ukurannya. 156 00:08:54,370 --> 00:08:57,980 ‫Oke, jadi itu request dot file dan ingat 157 00:08:57,980 --> 00:08:59,920 ‫kita juga login bodynya. 158 00:08:59,920 --> 00:09:03,810 ‫Dan tubuh sekarang hanya namanya, oke. 159 00:09:03,810 --> 00:09:07,100 ‫Jadi parse tubuh kita tidak benar-benar mampu menangani 160 00:09:07,100 --> 00:09:09,470 ‫file dan itulah sebabnya file tidak 161 00:09:09,470 --> 00:09:11,790 ‫muncul di tubuh sama sekali 162 00:09:11,790 --> 00:09:15,920 ‫dan tentu saja itulah alasan mengapa kita benar-benar membutuhkan paket Multer. 163 00:09:15,920 --> 00:09:19,570 ‫Bagaimanapun, sekarang mari kita lihat folder kita dan jadi di sini 164 00:09:19,570 --> 00:09:24,241 ‫kita memiliki gambar, pengguna, dan kemudian di suatu tempat di sini seharusnya menjadi gambar 165 00:09:24,241 --> 00:09:26,890 ‫yang baru saja kita unggah tetapi saya tidak 166 00:09:28,150 --> 00:09:30,160 ‫dapat benar-benar melihatnya di sini. 167 00:09:30,160 --> 00:09:33,313 ‫Ayo update, ah dan memang ini dia. 168 00:09:34,960 --> 00:09:37,890 ‫Jadi jika kita klik sekarang kita tidak bisa benar-benar 169 00:09:37,890 --> 00:09:39,840 ‫melihatnya karena seperti yang Anda 170 00:09:39,840 --> 00:09:42,600 ‫lihat di sini bahkan tidak memiliki ekstensi, oke. 171 00:09:42,600 --> 00:09:46,240 ‫Dan itulah mengapa kami tidak dapat benar-benar membukanya saat ini. 172 00:09:46,240 --> 00:09:49,690 ‫Jadi file tersebut benar-benar muncul di sini di folder kami 173 00:09:49,690 --> 00:09:52,320 ‫dan kami memiliki unggahan yang benar-benar berfungsi. 174 00:09:52,320 --> 00:09:54,870 ‫Yah, setidaknya semacam itu tapi kita tidak benar-benar 175 00:09:54,870 --> 00:09:57,350 ‫berada di tempat yang kita inginkan, kan. 176 00:09:57,350 --> 00:09:59,960 ‫Jadi kami ingin memberinya nama file yang lebih 177 00:09:59,960 --> 00:10:02,100 ‫baik dan kami juga ingin sedikit 178 00:10:02,100 --> 00:10:04,690 ‫mengatur ulang kode yang kami miliki saat ini. 179 00:10:04,690 --> 00:10:07,123 ‫Dan mari kita lakukan itu di video berikutnya.