‫Jonas: Di bagian kedua dari mengunggah gambar tur ini,
‫kami sekarang akan memproses semuanya.
‫Tetapi sebelum kita mulai
‫melakukannya, sebenarnya ada sesuatu yang
‫perlu saya perbaiki di pengontrol pengguna.
‫Dan sebenarnya dalam resizeUserPhoto ini, dan itu
‫adalah bahwa kita benar-benar
‫perlu menunggu seluruh operasi ini di sini, oke?
‫Jadi semua ini di sini benar-benar akan mengembalikan janji, dan
‫itu masuk akal, benar,
‫karena semua operasi ini di sini, membutuhkan waktu, dan
‫tentu saja terjadi di latar belakang.
‫Jadi mereka adalah kode
‫asinkron, dan jelas mereka tidak boleh memblokir loop acara.
‫Sekarang masalahnya di sini
‫adalah bahwa sekarang kita memanggil fungsi
‫berikutnya di sini, jadi middleware berikutnya, tanpa benar-benar
‫menunggu operasi ini selesai di sini.
‫Dan itu bukan ide yang bagus.
‫Jadi mari kita gunakan
‫menunggu di sini, dan tentu saja async, dan semua itu.
‫Jadi tangkap Async di sini.
‫Baiklah, simpan saja, dan itu jauh lebih baik.
‫Jadi sekarang kita sebenarnya akan
‫melakukan sesuatu yang sangat mirip dengan gambar tur kita.
‫Jadi biarkan saya melanjutkan dan menyalin ini.
‫Baiklah, dan meskipun
‫tidak akan sama persis, ada baiknya sudah memilikinya di sini.
‫Jadi yang ini juga akan menjadi fungsi async.
‫Baiklah, sekarang seperti sebelumnya, jika tidak ada
‫gambar yang diunggah, maka kita
‫ingin langsung pindah ke middleware berikutnya.
‫Jadi jika tidak ada permintaan. file, dan sebenarnya saya
‫akan mengambil satu langkah lebih
‫jauh, mengharuskan ada sampul gambar dan
‫juga gambar.
‫Jadi pada dasarnya kami ingin pindah ke middleware berikutnya jika
‫tidak ada permintaan. file. imageCover,
‫atau tidak ada permintaan. file. gambar-gambar.
‫Jadi dalam hal ini, selanjutnya.
‫Oke, dan sekarang mari kita mulai dengan
‫memproses gambar sampul, dan kemudian semua gambar lainnya dalam satu lingkaran,
‫pada dasarnya.
‫Jadi gambar lainnya.
‫Sekarang di mana kita sebenarnya mendapatkan gambar sampul?
‫Yah ingat bagaimana saya mengatakan bahwa itu atas permintaan. file?
‫Tidak ada lagi file, dan kemudian . coverImage,
‫atau sebenarnya imageCover.
‫Dan kemudian ingat bagaimana itu array?
‫Jadi mari kita lihat itu sekali lagi.
‫Benar, jadi semua ini adalah permintaan. file, dan
‫kemudian dari sana kita mengambil imageCover, dan
‫itu adalah array dari satu elemen.
‫Dan sekarang kita menginginkan elemen nomor nol, dan
‫kemudian . penyangga.
‫Jadi ini terlihat aneh di sini.
‫Lalu kita ingin mengubah ukurannya menjadi
‫rasio 2/3, dan lebarnya
‫menjadi 2.000 piksel, dan tingginya 1.333, oke?
‫Dan sekali lagi, itu adalah rasio 3/2 yang bagus,
‫yang sangat umum dalam gambar.
‫Selanjutnya, kami juga ingin memformatnya sebagai JPEG dengan kualitas 90%, dan
‫kemudian menyimpannya sebagai file.
‫Tapi kali ini untuk image/tour, dan di
‫sini mari kita definisikan nama file kita secara terpisah.
‫Baiklah, karena kita sebenarnya akan membutuhkannya lagi.
‫Jadi imageCoverFilename, dan sekali
‫lagi sekarang kita perlu membuat nama file yang unik.
‫Jadi sekarang tur, dan mari kita masukkan lagi
‫ID tur di sini, di mana sebelumnya adalah ID pengguna.
‫Dan itu atas permintaan. params, jadi ingatlah bahwa
‫rute ini akan selalu
‫berisi ID tur, dan karena itu
‫berdasarkan permintaan. param Indo.
‫Kemudian lagi cap waktu, Tanggal. sekarang, dan
‫katakanlah ini adalah gambar sampul, oke?
‫Dan yang lain kemudian akan mendapatkan beberapa nomor.
‫Dan kemudian tentu saja. jpeg, jadi mari kita gunakan di sini.
‫Jadi imageCoverFilename.
‫Oke, dan sekarang sebagai satu langkah terakhir,
‫kita sebenarnya perlu
‫memungkinkan pengelola tur pembaruan
‫kita mengambil nama file sampul gambar ini untuk memperbaruinya
‫di dokumen tur saat ini, oke?
‫Jadi mari
‫kita cepat melihat bagaimana dokumen sebenarnya diperbarui.
‫Jadi kami sangat
‫sederhana menggunakan fungsi pabrik updateOne ini.
‫Dan yang itu sebenarnya hanya akan memperbarui semua data
‫yang ada di badan ke dokumen baru.
‫Jadi hanya untuk membuktikan bahwa untuk Anda di sini.
‫Jadi updateOne, dibutuhkan di seluruh permintaan. tubuh, oke?
‫Jadi sekarang rahasianya adalah untuk benar-benar menempatkan nama file
‫sampul gambar ini berdasarkan permintaan. tubuh, oke?
‫Jadi permintaan. tubuh. gambar sampul.
‫Oh dan lagi, itu disebut
‫imageCover, harus sama dengan imageCoverFilename, oke, masuk akal?
‫Dan tentu saja disebut imageCover
‫karena itulah nama yang kami miliki dalam definisi skema kami.
‫Dan kemudian ketika melakukan
‫pembaruan, itu akan mencocokkan bidang ini di
‫tubuh dengan bidang di database kami.
‫Dan sebenarnya kita bisa refactor ini sedikit
‫karena kita tidak benar-benar membutuhkan nama variabel ini di sini sama sekali.
‫Jadi kita bisa meletakkan nama file ini di sini tepat di badan.
‫Jadi taruh itu di sini, dan kemudian gunakan di sini segera.
‫Jadi kita tidak membutuhkan baris kode ini sama sekali.
‫Bagus, dan sekarang sebelum beralih ke gambar lainnya, mari kita uji
‫dengan apa yang sudah kita miliki
‫saat ini.
‫Jadi mari kita singkirkan konsol ini. log, dan
‫jadi ketika kita sekarang melakukan
‫permintaan, maka gambar sampul kita harus
‫sudah diunggah dan dimasukkan ke dalam dokumen tur, oke?
‫Jadi tiga gambar lainnya di sini tentu saja tidak, tetapi
‫setidaknya sampul gambar sekarang
‫harus berfungsi pada titik ini, setidaknya
‫jika kita melakukan semuanya dengan benar.
‫Jadi mari kita lihat apakah itu ada di suatu
‫tempat di sini, dan gambarnya jelas masih kosong.
‫Tapi saya sedang mencari gambar sampul sekarang, jadi di mana itu?
‫Dan ini dia, jadi imageCover, dan itu
‫sangat mirip dengan nama file yang
‫baru saja kita tentukan.
‫Dan mari kita coba memuat ulang semua halaman tur kami di sini, dan mungkin tur
‫baru kami sudah ada di sini.
‫Ah, ini dia, jadi itu tur biker gunung yang baru.
‫Dan ini memang gambar yang baru saja kita upload.
‫Sangat cantik.
‫Sekarang jika kita mencoba
‫membuka halaman ini, maka gambar lainnya tidak ada di sini, oke?
‫Jadi mereka tidak bisa ditemukan,
‫dan tentu saja itulah yang akan kita lakukan selanjutnya.
‫Baiklah.
‫Jadi ingatlah bahwa gambar
‫kita di sini juga merupakan larik,
‫yang kemudian berisi semua unggahan file baru ini.
‫Jadi sekarang mari kita benar-benar menggunakan loop
‫untuk memproses masing-masing dari mereka dalam satu iterasi.
‫Jadi permintaan. file. gambar-gambar. untuk setiap.
‫Dan kemudian fungsi panggilan
‫balik kami di mana kami mendapatkan akses ke file saat ini.
‫Baiklah, sekarang di sini kita benar-benar perlu
‫membuat nama file saat ini, dan Anda akan
‫melihat alasannya dalam sedetik.
‫Jadi nama file sama, dan kemudian sesuatu yang sangat mirip dengan ini.
‫Bedanya sekarang bukan cover, tapi
‫malah kita sebut satu, dua dan tiga.
‫Jadi dalam fungsi panggilan
‫balik kami, kami sebenarnya juga mendapatkan akses ke indeks saat ini, oke?
‫Jadi kita membutuhkan file, dan I untuk index.
‫Jadi ini bukan cover, tapi index plus one.
‫Jadi plus satu, dan itu
‫hanya karena indeks ini berbasis nol, oke?
‫Selanjutnya adalah langkah pemrosesan itu sendiri, yang sekali
‫lagi sangat mirip dengan yang ini.
‫Dan sekarang tentu saja kita perlu menandai ini sebagai async juga.
‫Baiklah, dan di bawah ini adalah nama filenya.
‫Oke, sekarang mengapa kita benar-benar membutuhkan nama file ini?
‫Kami membutuhkannya karena sekarang kami perlu memasukkan nama file
‫ini ke dalam permintaan. tubuh. gambar, dan itulah logika yang sama persis seperti yang kami
‫miliki di sini sebelumnya berdasarkan permintaan. tubuh. gambarSampul.
‫Jadi ingatlah bahwa dalam koleksi
‫kami, request. tubuh. gambar sebenarnya adalah array.
‫Jadi sekarang kita perlu membuat array itu dan
‫memulainya sebagai array kosong.
‫Jadi permintaan. tubuh. gambar sebagai
‫array kosong, dan kemudian di setiap iterasi kami
‫kemudian akan mendorong nama file saat
‫ini ke array gambar ini.
‫Jadi permintaan. tubuh. gambar-gambar.
‫Dorong, nama file, oke?
‫Dan dengan ini kita hampir selesai.
‫Hanya ada satu masalah kecil, yaitu
‫fakta bahwa kita sebenarnya tidak
‫menggunakan async waiting dengan benar di sini dalam kasus ini,
‫jadi dalam loop ini.
‫Dan itu karena async menunggu di
‫sini hanya di dalam fungsi panggilan balik
‫dari loop foreach ini.
‫Dan itu sebenarnya tidak akan
‫menghentikan kode untuk bergerak tepat di sebelah baris ini
‫di mana kita kemudian memanggil middleware berikutnya, oke?
‫Jadi sekali lagi, saat ini kita sebenarnya tidak sedang menunggu
‫semua ini di sini, sekali lagi, karena penantian asinkron ini
‫terjadi di dalam fungsi panggilan
‫balik dari salah satu metode loop ini.
‫Dan kita sebenarnya pernah mengalami masalah seperti ini
‫sebelumnya, tetapi untungnya ada solusi untuk ini,
‫karena karena ini adalah fungsi asinkron di sini,
‫ia akan mengembalikan janji baru.
‫Jadi jika kita membuat
‫peta, kita dapat menyimpan array dari semua janji ini.
‫Dan kemudian jika kita memiliki array,
‫kita dapat menggunakan janji. semua untuk menunggu mereka semua.
‫Dan dengan itu kita akan benar-benar
‫menunggu sampai semua kode ini, dan
‫dalam hal ini, sampai semua pemrosesan
‫gambar ini selesai, dan baru kemudian pindah ke
‫baris berikutnya, yang memanggil
‫middleware berikutnya untuk benar-benar memperbarui dokumen tur.
‫Dan jika kita tidak melakukan
‫itu dalam kasus ini, itu benar-benar
‫tidak akan berhasil sama sekali, karena tanpa ini mendorong
‫di sini, permintaan. tubuh. gambar akan tetap kosong saat
‫kita panggil selanjutnya.
‫Oleh karena itu, tidak satu pun dari
‫nama gambar ini yang akan disimpan ke dalam dokumen, oke?
‫Jadi sekarang mari kita gunakan janji. semua, dan
‫sebenarnya saya bahkan tidak menyimpan array ini di sini ke variabel apa pun,
‫sebagai gantinya saya akan menggunakan janji. semua segera tentang
‫ini.
‫Jadi tunggu Janji. semua di array
‫kembali dari ini, oke?
‫Jadi saya harap itu masuk akal.
‫Jadi sekarang mari kita log tubuh di sini ke konsol.
‫Baiklah, jadi dengan ini kita sekarang harus siap
‫untuk mengunggah semua gambar kita, oke?
‫Ayo turun ke sini dan coba ini lagi.
‫Baiklah, jadi di mana susunan gambar kita?
‫Yah, mungkin itu di suatu tempat di atas sini, ah, ini dia.
‫Jadi saya melewatkan itu entah bagaimana.
‫Dan itu terlihat sangat menjanjikan, bukan?
‫Jadi tiga gambar yang bagus, sekarang
‫mari kita lihat di sini di halaman kami.
‫Ah, itu ada, tapi kurang tepat kan?
‫Jadi sepertinya kami hanya mengunggah
‫gambar sampul tiga kali.
‫Jadi mari kita lihat Postman, tetapi nama
‫gambar sebenarnya benar, jadi
‫ada yang salah dalam pemrosesan kami di sana.
‫Mari kita lihat juga permintaan. tubuh, oh, dan saya lupa untuk
‫benar-benar meletakkannya di sini.
‫Oke, tapi saya pikir itu bahkan tidak perlu
‫karena kita baru saja
‫melihat di Postman bahwa nama filenya benar.
‫Jadi kita tidak membutuhkan yang ini lagi.
‫Sekarang mari kita lihat nama
‫file yang baru saja kita unggah, jadi itu di publik dan tur.
‫Dan inilah mereka.
‫Jadi ini mungkin yang pertama dari tes terakhir.
‫Dan seperti yang Anda lihat, semuanya memang
‫gambar yang sama persis.
‫Jadi sampul, satu, dua, dan tiga adalah gambar yang
‫sama, jadi itu tidak benar.
‫Dan saya bisa langsung melihat apa masalahnya.
‫Jadi Anda melihat bahwa kami sebenarnya membaca, masih,
‫meminta. file. imageCover, dan
‫bukan file dari iterasi saat ini dari loop ini.
‫Oke, jadi alih-alih itu harus file. penyangga.
‫Baiklah, jadi mari kita lanjutkan
‫dan hapus semua ini.
‫Baiklah, dan coba lagi sekarang.
‫Jadi mari kita kirim itu.
‫Nama tampaknya masih benar, tetapi
‫sekarang ketika kita memuat ulang ini, mari kita lihat.
‫Ah, itu terlihat benar.
‫Cantik cantik.
‫Anda lihat semua gambar diformat dengan baik,
‫bahkan yang ini, ingat, dalam potret
‫dan bahkan bukan lanskap, tetapi
‫pada dasarnya kami memangkasnya dan masih terlihat indah.
‫Oke, jadi di sini sekarang kita
‫bisa memastikannya, jadi sebenarnya di 2.000-an kali 1.333 piksel.
‫Baiklah, itu masih sedikit di sisi besar di sini,
‫jadi mungkin kita bisa mengurangi kualitasnya sedikit lagi, tapi
‫itu tidak terlalu penting.
‫Yang benar-benar penting di sini
‫adalah bahwa logika yang baru saja kita terapkan di sini benar-benar berfungsi.
‫Jadi hanya untuk cepat rekap apa yang kami lakukan dalam dua kuliah ini.
‫Jadi kami membuat unggahan multi menggunakan penyimpanan memori dan filter
‫ini hanya untuk gambar.
‫Kemudian kami membuat middleware gambar tur
‫unggah dengan menggunakan unggah. bidang, yang mengambil satu
‫sampul gambar dan tiga gambar, dan kemudian
‫atas permintaan itu akan menempatkan properti file seperti ini, oke?
‫Kemudian di middleware berikutnya kami mengubah ukuran gambar-gambar ini,
‫dan pertama-tama gambar
‫sampul, dan kemudian tiga gambar yang tersisa.
‫Dan yang sangat penting untuk diperhatikan di
‫sini adalah bagaimana kami menempatkan nama file gambar berdasarkan permintaan. tubuh.
‫Dan kami melakukannya sehingga di middleware
‫berikutnya, yang merupakan pengendali
‫rute sebenarnya, kemudian akan memasukkan data itu
‫ke dokumen baru ketika memperbaruinya, oke?
‫Jadi kami melakukannya dengan sampul gambar, dan
‫kami juga melakukannya dengan gambar yang tersisa dengan
‫mendorongnya ke dalam tubuh. gambar, yang seperti
‫yang kita ketahui dari skema
‫tur kita, mengharapkan array string.
‫Dan dalam hal ini, nama file.
‫Jadi tentang gambar-gambar lain ini,
‫kami memilikinya berdasarkan permintaan. file. gambar, jadi ini
‫adalah array, dan tentu saja kita mengulangnya menggunakan map.
‫Dan kami menggunakan peta sehingga pada dasarnya kami
‫dapat menyimpan tiga janji yang merupakan hasil
‫dari tiga fungsi asinkron ini di sini, jadi
‫kami kemudian dapat menunggu semuanya di
‫sini menggunakan Janji. semua, oke?
‫Dan baru setelah itu kita beralih
‫ke pengelola pembaruan tur yang sebenarnya, oke?
‫Dan bagian ini sangat
‫penting, jadi penting bagi kita
‫untuk pindah ke middleware berikutnya segera setelah bagian
‫ini benar-benar selesai.
‫Karena jika tidak, permintaan. tubuh. gambar akan kosong,
‫dan tentu saja nama file kita tidak akan
‫disimpan ke dokumen tur saat ini, oke?
‫Dan itu sebenarnya membungkus
‫bagian pengunggahan gambar atau file dari bagian ini.
‫Jadi saya harap itu menyenangkan,
‫saya tahu itu sangat keren bagi saya.
‫Jadi saya sangat menyukai hal
‫semacam ini, yang membuat aplikasi saya terasa seperti dunia nyata.
‫Bagaimanapun, harap Anda menikmatinya, dan sampai
‫jumpa di yang berikutnya.