‫Jonas: Sekarang mari kita mengkonfigurasi Multer dengan kebutuhan kita.
‫Pertama memberi gambar nama file yang lebih baik,
‫lalu kedua hanya mengizinkan file gambar
‫untuk diunggah ke server kami.
‫Dan untuk memulai, mari kita
‫pindahkan semua hal yang
‫berhubungan dengan Multer dari router ini ke controller.
‫Jadi mari kita potong
‫ini di sini, dan saya akan meletakkannya
‫di sini di akhir, atau sebenarnya di atas, oke?
‫Jadi segala sesuatu yang berhubungan dengan
‫Multer, kami akan meletakkannya di sini di atas.
‫Kemudian kita juga tentunya perlu mengimport paket Multer ini.
‫Dan sekarang kita juga perlu membuat middleware dengan ini.
‫Jadi ekspor. uploadUserPhoto akan
‫sama dengan ini.
‫Baiklah, jadi kita masih memiliki
‫fungsi middleware, tapi sekarang memiliki nama sendiri yang lebih mudah digunakan, oke?
‫Dan di sini, userController. unggah Foto, oke?
‫Sehingga terlihat jauh lebih bagus,
‫dan tentu saja masuk
‫akal bahwa kode ini ada di controller.
‫Jadi sekarang ini bagus dan
‫bersih, dan kita sebenarnya bisa menutupnya sekarang.
‫Bagus, jadi sekarang mari kita
‫mulai dan mengonfigurasi unggahan Multer sesuai kebutuhan kita.
‫Jadi untuk itu kita akan membuat satu penyimpanan Multer
‫dan satu filter Multer, oke?
‫Dan kemudian kita akan menggunakan penyimpanan dan
‫filter itu untuk kemudian membuat unggahan dari sana, oke?
‫Jadi mari kita lakukan itu di sini.
‫Jadi multiStorage, kami menggunakan multi. penyimpanan disk.
‫Baiklah, dan kita juga
‫bisa memilih untuk menyimpan file dalam memori sebagai
‫buffer, sehingga kita bisa menggunakannya nanti oleh proses lain.
‫Dan sebenarnya kita akan melakukannya nanti,
‫tapi untuk saat ini tentu saja kita
‫ingin benar-benar menyimpan file seperti di sistem file kita, oke?
‫Jadi untuk penyimpanan disk kita akan mengambil beberapa pilihan,
‫dan yang pertama adalah tujuan.
‫Tapi sekarang kita tidak bisa begitu saja mengaturnya ke jalur ini seperti
‫yang kita lakukan sebelumnya.
‫Tidak, ini sedikit lebih rumit, oke?
‫Dan benar-benar tujuan ini di sini adalah fungsi panggilan balik
‫yang berjalan seperti ini.
‫Jadi fungsi panggilan balik ini memiliki akses ke permintaan saat ini, ke
‫file yang saat ini diunggah, dan
‫juga ke fungsi panggilan balik.
‫Dan fungsi panggilan balik
‫ini sedikit mirip dengan fungsi berikutnya di Express.
‫Tapi saya menyebutnya cb di sini, yang merupakan singkatan
‫dari callback, jadi namanya berbeda
‫dari yang berikutnya, karena sebenarnya bukan dari Express, oke?
‫Tapi itu serupa karena kita bisa melewatkan kesalahan di sini dan
‫hal-hal lain, seperti yang akan Anda lihat sebentar lagi.
‫Jadi sekarang untuk menentukan
‫tujuan, kita sebenarnya perlu memanggil panggilan balik itu.
‫Jadi panggilan balik, dan kemudian argumen pertama adalah kesalahan
‫jika ada.
‫Dan jika tidak, maka null saja.
‫Dan argumen kedua adalah tujuan sebenarnya.
‫Jadi mari kita salin
‫itu dari sini, dan tempel di sini.
‫Baiklah, dan sekali lagi ini semua terlihat agak aneh dan rumit, dan
‫mari kita
‫lihat dokumentasi Multer di GitHub.
‫Oke, jadi jika Anda perlu
‫mempelajari lebih lanjut, Anda dapat melihat dokumentasi ini di sini.
‫Dan seperti yang Anda
‫lihat, dengan 6.000 bintang, sebenarnya ini adalah paket yang cukup populer.
‫Jadi di sini Anda dapat mempelajari cara menggunakannya.
‫Tapi sebenarnya apa yang akan Anda
‫temukan di sini adalah apa
‫yang akan kita lakukan selama beberapa kuliah berikutnya, oke?
‫Jadi ini terlihat jauh lebih membingungkan daripada
‫apa yang akan kita lakukan, oke?
‫Tetapi Anda melihat
‫bahwa ini sebenarnya yang sedang kami lakukan saat ini, jadi kami
‫menyetel tujuan dan selanjutnya kami juga akan menyetel nama file.
‫Jadi mari kita lakukan itu, dan sekali lagi, jika Anda
‫ingin mempelajari lebih lanjut, lihat dokumentasi itu.
‫Tetapi untuk saat ini saya ingin mengatur properti nama file.
‫Jadi bukan itu, cukup nama file.
‫Dan lagi, itu adalah fungsi panggilan balik yang
‫sangat mirip dengan tanda tangan, permintaan, file, dan panggilan balik yang serupa.
‫Dan sekarang kami ingin memberikan file kami beberapa nama file yang unik.
‫Dan cara yang
‫akan saya lakukan adalah dengan menyebutnya user-userid- stempel waktu saat ini.
‫Jadi kira-kira seperti ini: jadi pengguna-,
‫dan kemudian ID yang aneh ini, kira-kira seperti ini.
‫Benar, dan kemudian stempel waktu saat
‫ini, yang akan menjadi angka yang sangat besar,
‫kira-kira seperti ini, dan tentu saja ekstensi file, oke?
‫Dan dengan ini kami pada dasarnya dapat
‫menjamin bahwa tidak akan ada dua gambar dengan nama file yang sama.
‫Jika kami hanya menggunakan ID
‫pengguna, maka tentu saja beberapa unggahan oleh
‫pengguna yang sama akan menimpa gambar sebelumnya.
‫Dan jika kami hanya menggunakan pengguna dengan stempel waktu, maka
‫jika dua pengguna mengunggah gambar pada saat yang sama, mereka
‫akan mendapatkan nama file yang sama persis, yang
‫tidak masuk akal.
‫Baiklah, jadi pertama-tama, mari
‫kita ekstrak nama file dari file yang diunggah.
‫Dan bagaimana kita mendapatkannya?
‫Mari kita lihat keluaran konsol kami di sini, di
‫mana kami memiliki permintaan. berkas sudah lama.
‫Jadi ini dia, jadi ingat bahwa objek ini di
‫sini adalah permintaan. file,
‫dan itulah tepatnya file ini, oke?
‫Jadi di sini kita
‫memiliki mimetype, dan JPEG disimpan di sini, oke?
‫Dan dari sinilah kita akan
‫mendapatkan ekstensi file.
‫Jadi ekstensi sama dengan file. mimetype, lalu mari kita
‫pisahkan string itu dengan garis miring, dan ambil
‫elemen kedua dari array yang dihasilkan.
‫Dan itu hanya akan menjadi bagian ini, jadi hanya ini.
‫Baiklah, jadi itu ekstensinya.
‫Jadi sekarang seperti
‫sebelumnya, kita perlu memanggil fungsi callback tanpa kesalahan, dan kemudian
‫nama file yang ingin kita tentukan.
‫Jadi, itu akan menjadi pengguna, lalu ID pengguna, ingat?
‫Dan karena kami memiliki akses ke permintaan di sini, itu
‫sangat sederhana, permintaan. pengguna. Indo.
‫Dan seperti yang Anda tahu,
‫itu adalah ID dari pengguna yang saat ini masuk.
‫Kemudian stempel waktu, jadi Tanggal. sekarang, oke, lalu beri
‫titik pada ekstensi yang baru saja kita buat, oke?
‫Jadi mari kita singkirkan komentar
‫ini, dan itu sebenarnya adalah penyimpanan kita.
‫Jadi pada dasarnya definisi lengkap tentang
‫bagaimana kita ingin menyimpan file
‫kita, dengan tujuan dan nama file.
‫Selanjutnya, mari kita buat filter Multer.
‫Jadi mari kita menyebutnya persis seperti itu.
‫Dan filter di Multer hanyalah, sekali
‫lagi, fungsi panggilan balik, mirip dengan yang
‫kita miliki sebelumnya, mengakses permintaan, file, dan fungsi panggilan balik.
‫Dan dalam fungsi ini, tujuannya
‫pada dasarnya untuk menguji apakah file yang diunggah adalah gambar.
‫Dan jika demikian, maka kita memasukkan true
‫ke dalam fungsi callback, dan
‫jika tidak kita meneruskan false ke dalam fungsi callback,
‫bersama dengan kesalahan.
‫Karena sekali lagi, kami tidak mengizinkan
‫file yang diunggah bukan gambar.
‫Dan itulah gunanya filter ini.
‫Sekarang, jika dalam aplikasi
‫Anda sendiri Anda ingin mengunggah sesuatu yang lain, katakanlah file
‫CSV, ketika tentu saja Anda dapat mengujinya alih-alih gambar.
‫Jadi semua hal yang kami lakukan
‫di sini tidak hanya
‫berfungsi untuk gambar, tetapi juga untuk
‫semua jenis file yang ingin Anda unggah, oke?
‫Sekarang sekali lagi, dalam hal ini kita benar-benar berbicara tentang gambar, jadi
‫mari kita uji apakah file yang diunggah adalah gambar.
‫Dan untuk itu kita akan sekali lagi menggunakan mimetype,
‫karena apa pun jenis
‫gambar yang diunggah, jadi tidak peduli apakah itu JPEG, atau PNG,
‫atau bitmap, atau TIFF, atau apa
‫pun, mimetype akan selalu dimulai dengan gambar.
‫Dan sekarang kita bisa mengujinya.
‫Jadi jika file. tipe pantomim. startWith, image, dan
‫jadi saya tidak yakin apakah kita pernah menggunakan yang ini sebelumnya,
‫tetapi ini adalah metode string yang cukup baru dan sangat
‫berguna yang tersedia di JavaScript, jadi
‫di semua JavaScript secara umum.
‫Jadi seandainya kita benar-benar memiliki gambar, yah, sekali lagi tidak
‫ada kesalahan dan kita lulus benar, seperti yang
‫saya katakan di awal.
‫Tetapi jika tidak, kami kemudian akan benar-benar melewati kesalahan, dan
‫kemudian salah.
‫Jadi mari kita beri tanda x di sini, dan salah.
‫Jadi untuk x ini di sini, kita sekarang akan membuat AppError, seperti
‫yang telah kita lakukan selama ini.
‫Dan sebenarnya kita sudah memilikinya di sini.
‫Jadi katakanlah
‫AppError baru, bukan gambar,
‫harap unggah gambar saja, oke?
‫Dan kemudian 400 untuk permintaan yang buruk.
‫Hebat, jadi kami memiliki penyimpanan kami, kami memiliki filter
‫kami, sekarang saatnya
‫untuk benar-benar menggunakannya untuk membuat unggahan.
‫Baiklah, jadi unggahan sekarang tidak akan terlihat seperti
‫ini, tetapi kita akan meneruskan variabel-variabel ini.
‫Jadi di Multer kita bisa menentukan penyimpanan,
‫dan begitulah multiStorage kita.
‫Dan kemudian fileFilter,
‫yang merupakan variabel yang kami sebut multiFilter.
‫Oke, dan hanya itu.
‫Dan tentu saja kita bisa meletakkan
‫semua ini di sini langsung ke objek opsi ini di sini.
‫Tapi saya biasanya lebih suka melakukan
‫ini di luar dan kemudian hanya meneruskan variabel ke objek opsi.
‫Sehingga kemudian terlihat sedikit lebih bersih.
‫Jadi ini adalah banyak langkah yang
‫perlu kita ambil untuk benar-benar membuat middleware Multer kita.
‫Tapi akhirnya kita kemudian tentunya,
‫seperti yang kita lakukan
‫di video terakhir, menggunakan upload ini, dan di atasnya
‫kita sebut single, dengan nama field.
‫Jadi foto, dan kemudian dari sana kami membuat ekspor,
‫atau middleware, yang sebenarnya sudah kami sertakan
‫ke router kami.
‫Jadi sekarang mari kita hapus jenis gambar lama yang kita
‫miliki di sini sebelumnya.
‫Tidak, itu tidak berhasil.
‫Dan sekarang mari kita benar-benar mengujinya di sini lagi.
‫Jadi kembali di Postman, kami masih memiliki nama kami
‫di sini dan gambar Leo, jadi ayo pergi.
‫Dan kami tidak mendapatkan kesalahan, itu bagus.
‫Dan mari kita lihat output kita di sini lagi.
‫Jadi semuanya di sini pada awalnya
‫sama, tetapi kemudian Anda melihat bahwa nama file kami sebenarnya sekarang benar.
‫Dan jika Anda lihat di sini di folder
‫kami, maka memang ada gambar kami.
‫Dan itulah yang kami unggah.
‫Jadi itu di dev-data, gambar, Leo.
‫Dan memang, itu persis sama.
‫Hebat, itu luar biasa.
‫Sekarang hanya untuk menguji filter ini
‫di sini juga, mari kita coba mengunggah beberapa file lain yang bukan gambar.
‫Jadi mari kita pilih sesuatu yang lain di sini dari
‫dev-data kita, dan katakanlah hanya beberapa data JSON.
‫Jadi mari kita tunggu jika kita mendapatkan kesalahan di sini.
‫Dan memang kita mendapatkan satu.
‫Jadi bukan gambar, harap unggah hanya gambar.
‫Dan itu berarti itu juga berhasil.
‫Begitu sempurna, semua konfigurasi Multer kami sekarang berfungsi dengan sangat
‫baik, tetapi tentu saja masih ada
‫satu langkah yang hilang.
‫Dan itu untuk benar-benar menautkan
‫pengguna ke gambar yang baru diperbarui, bukan?
‫Karena saat ini di database,
‫kita jelas masih memiliki
‫path, atau sebenarnya nama dari gambar lama,
‫karena tidak ada dalam kode kita yang
‫menentukan bahwa kita ingin memperbarui dokumen pengguna itu sendiri, bukan?
‫Dan jadi mari kita perbaiki itu di video berikutnya.