‫Narator: Pada bagian pertama dari
‫bagian ini kita akan mempelajari semua tentang
‫mengunggah gambar dengan paket Multer dan dalam video khusus
‫ini kita akan mulai mengimplementasikan unggahan gambar untuk foto pengguna.
‫Tetapi sebelum kita mulai, mari kita lakukan pembersihan cepat
‫di sini dan singkirkan keluaran konstan dari cookie yang
‫kita miliki di sini.
‫Jadi itu di suatu tempat di sini dan itu jauh lebih baik.
‫Sekarang kita akan bekerja mengunggah foto
‫pengguna dan mari kita buka di sini rute pengguna, oke.
‫Jadi, Multer adalah middleware yang sangat populer untuk
‫menangani data formulir multi-bagian, yang merupakan formulir dalam pengkodean yang
‫digunakan untuk mengunggah file dari formulir.
‫Jadi ingat bagaimana di bagian terakhir
‫kami menggunakan formulir yang disandikan URL untuk memperbarui data pengguna
‫dan untuk itu kami juga harus menyertakan middleware khusus.
‫Jadi Multer pada dasarnya
‫adalah middleware untuk data formulir multi-bagian.
‫Dan sekarang inilah yang akan kita lakukan.
‫Kami akan mengizinkan pengguna untuk mengunggah
‫foto di rute Perbarui
‫Saya, sehingga alih-alih hanya dapat memperbarui email
‫dan foto, pengguna juga dapat mengunggah foto pengguna mereka.
‫Jadi sekali lagi, mari kita mulai
‫dengan menginstal paket yang kita butuhkan dan sebenarnya
‫mari kita buat jendela terminal baru di sini dan NPM menginstal Multer.
‫Baiklah dan di sini kita melihat bahwa kita berada di Multer 1. 4. 1.
‫Dan sekali lagi jika Anda mengalami masalah dengan paket
‫ini, harap pastikan bahwa Anda menginstal versi
‫yang sama seperti yang saya gunakan di sini.
‫Baiklah.
‫Jadi, mari kita sertakan itu di sini.
‫Jadi Multer, minta, Multer.
‫Jadi, mudah dan sekarang kita perlu mengonfigurasi apa yang disebut
‫unggahan Multer dan kemudian menggunakannya.
‫Dan mari lakukan itu di sini
‫di awal dan sebut saja Unggah dan kita panggil fungsi Multer yang baru
‫saja kita sertakan sebelumnya dan kemudian berikan
‫objek untuk beberapa opsi.
‫Dan untuk saat ini satu-satunya
‫pilihan yang akan kita
‫tentukan adalah tujuan dan saya akan mengaturnya ke Publik/gambar/pengguna, baiklah.
‫Dan itulah folder tempat kita
‫ingin menyimpan semua gambar
‫yang sedang diunggah.
‫Jadi di sini, Publik, Gambar dan Pengguna, seperti semua gambar
‫untuk semua pengguna yang
‫sudah kami miliki di database kami.
‫Benar dan tentu saja kita dapat mengonfigurasi ini
‫dengan cara yang jauh lebih kompleks dan
‫kita akan melakukannya di kuliah
‫berikutnya, tetapi untuk saat ini saya benar-benar ingin Anda memperkenalkan
‫paket ini dan omong-omong, kita sebenarnya bisa
‫menelepon fungsi Multer tanpa opsi apa pun di sana.
‫Jadi tanpa ini di sini dan kemudian gambar yang
‫diunggah hanya akan disimpan dalam memori dan tidak
‫disimpan di mana pun ke disk, tetapi tentu saja pada saat ini bukan
‫itu yang kita inginkan dan setidaknya kita perlu menentukan opsi tujuan ini.
‫Dan dengan ini file kami kemudian
‫benar-benar diunggah ke direktori di sistem file kami.
‫Dan saya telah menyebutkan ini sebelumnya,
‫tetapi mari kita pastikan bahwa kita berada di
‫halaman yang sama tentang ini, yaitu bahwa tentu saja
‫gambar tidak langsung diunggah ke database, kita hanya
‫mengunggahnya ke sistem file kita dan kemudian di database
‫kita menempatkan link pada dasarnya ke gambar itu.
‫Jadi dalam hal ini di setiap dokumen
‫pengguna kita harus memberi nama semua file yang diunggah, oke.
‫Sekarang sekali lagi, kami tidak melakukan itu di video
‫ini tetapi kami akan melakukannya nanti.
‫Untuk saat ini mari kita buat ini berhasil.
‫Bagaimanapun, yang perlu kita lakukan sekarang adalah
‫menggunakan unggahan ini di sini untuk benar-benar membuat fungsi middleware yang
‫dapat kita masukkan di sini ke dalam rute Perbarui Saya.
‫Jadi di sini, dan itu bekerja seperti ini.
‫Jadi upload, dot single, dan single karena disini kita hanya ingin
‫mengupdate satu gambar saja lalu disini menjadi single
‫kita lewati nama field yang akan menampung
‫gambar yang akan di upload.
‫Dan itu akan menjadi foto, oke.
‫Dan dengan bidang yang saya maksud
‫adalah bidang dalam formulir yang akan mengunggah gambar.
‫Baiklah, masuk akal?
‫Jadi sekali lagi, kami menyertakan paket Multer dan
‫kemudian dengan itu kami membuat unggahan.
‫Dan unggahan ini hanya untuk menentukan beberapa pengaturan
‫di mana dalam contoh ini kami hanya menentukan tujuan kemudian
‫kami menggunakan unggahan itu untuk membuat middleware baru yang
‫kemudian dapat kami tambahkan ke tumpukan rute yang ingin
‫kami gunakan untuk mengunggah file .
‫Jadi untuk itu kita katakan upload dot
‫single karena kita hanya memiliki
‫satu file tunggal dan akhirnya kita tentukan nama
‫field yang akan menampung file ini.
‫Oke, jadi middleware ini kemudian akan mengambil
‫file dan pada dasarnya menyalinnya ke
‫tujuan yang kita tentukan.
‫Dan setelah itu tentunya akan memanggil
‫middleware berikutnya yang ada di stack yaitu Update Me.
‫Juga, middleware ini di sini akan meletakkan file
‫atau setidaknya beberapa informasi
‫tentang file pada objek permintaan
‫dan jadi mari kita lihat itu.
‫Jadi mari kita pergi ke fungsi Update Me.
‫Jadi di sini dan di sini
‫di awal katakanlah konsol dot log, file reg dot.
‫Baiklah?
‫Dan juga saya ingin melihat tubuh.
‫Bagus dan dengan ini kami sekarang benar-benar siap
‫untuk menguji ini dan untuk saat ini kami akan mengujinya di
‫tukang pos tetapi tentu saja nanti
‫kami juga akan menambahkan fungsi ini ke formulir, baiklah.
‫Jadi mari kita pergi ke tukang pos di sini dan Perbarui Saya.
‫Jadi pada dasarnya untuk memperbarui pengguna saat ini.
‫Dan pengguna yang ingin saya perbarui bernama Leo,
‫jadi mari kita dapatkan dia di sini dari Kompas,
‫atau sebenarnya saya pikir itu tidak perlu
‫karena di login kami, kami sudah memiliki alamat email semacam
‫ini dan emailnya adalah leo@example. com dan
‫kata sandinya selalu sama.
‫Jadi tentu saja kita harus login terlebih dahulu sebagai pengguna
‫dan sekarang mari kita lanjutkan dan perbarui ke pengguna.
‫Jadi di dalam tubuh kita memiliki nama dan peran.
‫Jadi ayo kita update saja, sebut saja namanya disini.
‫Jadi nama saat ini adalah Leo Gillespie atau Gillespie, tidak
‫yakin bagaimana mengatakannya.
‫Mari kita tambahkan sesuatu di sini di tengah, oke.
‫Dan sekarang akhirnya kita tentukan properti foto, atau sebenarnya
‫kita seharusnya tidak melakukannya seperti ini tetapi
‫sebaliknya kita harus pergi ke sini untuk membentuk data, oke, karena ini
‫adalah cara bagaimana
‫kita dapat mengirim data formulir multi-bagian, baiklah.
‫Jadi, mari kita salin namanya saja di sini dan Name-nya.
‫Baiklah, jadi di sini kuncinya adalah Nama dan
‫kemudian nilainya adalah yang ini.
‫Selanjutnya, kita akhirnya menentukan bidang foto dan kemudian di sini kita
‫benar-benar dapat menentukan apa yang kita inginkan.
‫Jadi alih-alih teks yang merupakan default, kita
‫dapat menentukan file dan kemudian di sini kita dapat memilih file
‫yang ingin kita unggah.
‫Jadi file itu, gambar itu, ada di sini di data def kami lagi, lalu
‫di gambar dan kemudian di sini gambar Leo.
‫Dan itulah mengapa itu menunjukkan pengguna ini.
‫Oke, jadi klik buka dan sekarang saya pikir kami
‫siap untuk mengirim permintaan itu.
‫Baiklah, kami berhasil dan tentu saja seperti yang saya katakan sebelumnya,
‫foto itu jelas tidak diperbarui di sini di output basis
‫data karena itu untuk kuliah berikutnya.
‫Untuk saat ini kami hanya ingin benar-benar mengunggah gambar
‫ini ke folder yang kami tentukan.
‫Baiklah, sekarang mari kita lihat juga output kita dan jadi
‫di sini kita memiliki file titik permintaan, yang ini, dan
‫kita mendapatkan semua jenis informasi tentangnya.
‫Jadi nama aslinya, tujuan yang kita tentukan, nama file
‫baru di sini, dan juga ukurannya.
‫Oke, jadi itu request dot file dan ingat
‫kita juga login bodynya.
‫Dan tubuh sekarang hanya namanya, oke.
‫Jadi parse tubuh kita tidak benar-benar mampu menangani
‫file dan itulah sebabnya file tidak
‫muncul di tubuh sama sekali
‫dan tentu saja itulah alasan mengapa kita benar-benar membutuhkan paket Multer.
‫Bagaimanapun, sekarang mari kita lihat folder kita dan jadi di sini
‫kita memiliki gambar, pengguna, dan kemudian di suatu tempat di sini seharusnya menjadi gambar
‫yang baru saja kita unggah tetapi saya tidak
‫dapat benar-benar melihatnya di sini.
‫Ayo update, ah dan memang ini dia.
‫Jadi jika kita klik sekarang kita tidak bisa benar-benar
‫melihatnya karena seperti yang Anda
‫lihat di sini bahkan tidak memiliki ekstensi, oke.
‫Dan itulah mengapa kami tidak dapat benar-benar membukanya saat ini.
‫Jadi file tersebut benar-benar muncul di sini di folder kami
‫dan kami memiliki unggahan yang benar-benar berfungsi.
‫Yah, setidaknya semacam itu tapi kita tidak benar-benar
‫berada di tempat yang kita inginkan, kan.
‫Jadi kami ingin memberinya nama file yang lebih
‫baik dan kami juga ingin sedikit
‫mengatur ulang kode yang kami miliki saat ini.
‫Dan mari kita lakukan itu di video berikutnya.