Ada tiga cara utama menangani pengunggahan file di Node.js: menyimpan gambar langsung ke server Anda, menyimpan gambar data biner atau data string base64 ke database Anda, dan menggunakan bucket Amazon Web Service (AWS) S3 untuk menyimpan dan mengelola gambar-gambar.
Di sini Anda akan mempelajari cara menggunakan Multer, sebuah middleware Node.js, untuk mengunggah dan menyimpan gambar langsung ke server Anda di aplikasi Node.js dalam beberapa langkah.
Langkah 1: Menyiapkan Lingkungan Pengembangan
Kode yang digunakan dalam proyek ini tersedia di a repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT.
Pertama, buat folder proyek dan pindah ke dalamnya dengan menjalankan perintah berikut:
mkdir multi-tutorial
CD multi-tutorial
Selanjutnya, inisialisasi npm di direktori proyek Anda dengan menjalankan:
npm init -y
Selanjutnya, Anda perlu menginstal beberapa dependensi. Ketergantungan yang diperlukan untuk tutorial ini meliputi:
- Cepat: Express adalah kerangka kerja Node.js yang menyediakan serangkaian fitur yang kuat untuk aplikasi web dan seluler. Itu membuatnya lebih mudah untuk membangun aplikasi backend dengan Node.js.
- Multer: Multer adalah middleware ekspres yang menyederhanakan pengunggahan dan penyimpanan gambar ke server Anda.
Instal paket dengan manajer paket simpul dengan menjalankan:
npm Install mengungkapkan multer
Selanjutnya, buat sebuah aplikasi.js file di direktori root proyek Anda dan tambahkan blok kode di bawah ini untuk membuat server Express dasar:
//app.js
const mengungkapkan = memerlukan('cepat');
const aplikasi = ekspres();
const port = process.env. PELABUHAN || 3000;
app.listen (port, ()=>{
menghibur.catatan(`Aplikasi mendengarkan di port ${port}`);
});
Langkah 2: Mengonfigurasi Multer
Pertama, impor multer di Anda aplikasi.js mengajukan.
const multer = memerlukan("multi");
multer memerlukan mesin penyimpanan yang berisi informasi tentang direktori tempat file yang diunggah akan disimpan dan bagaimana file akan diberi nama.
A multer mesin penyimpanan dibuat dengan memanggil penyimpanan disk metode pada impor multer modul. Metode ini mengembalikan a Mesin Penyimpanan implementasi dikonfigurasi untuk menyimpan file pada sistem file lokal.
Dibutuhkan objek konfigurasi dengan dua properti: tujuan, yang merupakan string atau fungsi yang menentukan tempat penyimpanan gambar yang diunggah.
Properti kedua, nama file, adalah fungsi yang menentukan nama file yang diunggah. Dibutuhkan tiga parameter: persyaratan, mengajukan, dan panggilan balik (cb). persyaratan adalah Ekspres Meminta obyek, mengajukan adalah objek yang berisi informasi tentang file yang diproses, dan cb adalah panggilan balik yang menentukan nama file yang diunggah. Fungsi panggilan balik mengambil kesalahan dan nama file sebagai argumen.
Tambahkan blok kode di bawah ini ke aplikasi.js file untuk membuat mesin penyimpanan:
//Menyetel mesin penyimpanan
const storageEngine = multer.diskStorage({
tujuan: "./gambar-gambar",
nama file: (req, file, cb) => {
cb(batal, `${Tanggal.Sekarang()}--${file.namaasli}`);
},
});
Di blok kode di atas, Anda mengatur tujuan properti untuk ”./gambar-gambar”, dengan demikian, gambar akan disimpan di direktori proyek Anda dalam file gambar-gambar map. Kemudian, dalam panggilan balik, Anda lulus batal sebagai kesalahan dan string templat sebagai nama file. String template terdiri dari stempel waktu yang dihasilkan oleh panggilan Tanggal.sekarang() untuk memastikan bahwa nama gambar selalu unik, dua tanda hubung untuk memisahkan nama file dan stempel waktu, serta nama asli file, yang dapat diakses dari mengajukan obyek.
String yang dihasilkan dari template ini akan terlihat seperti ini: 1663080276614--contoh.jpg.
Selanjutnya, Anda perlu menginisialisasi multer dengan mesin penyimpanan.
Tambahkan blok kode di bawah ini ke aplikasi.js file untuk menginisialisasi multer dengan mesin penyimpanan:
// menginisialisasi multer
const unggah = multer({
penyimpanan: mesin penyimpanan,
});
multer mengembalikan instance Multer yang menyediakan beberapa metode untuk menghasilkan middleware yang memproses file yang diunggah multipart/formulir-data format.
Di blok kode di atas, Anda melewatkan objek konfigurasi dengan a penyimpanan properti diatur ke storageEngine, yang merupakan mesin penyimpanan yang Anda buat sebelumnya.
Saat ini, konfigurasi Multer Anda sudah selesai, tetapi tidak ada aturan validasi yang memastikan bahwa hanya gambar yang dapat disimpan di server Anda.
Langkah 3: Menambahkan Aturan Validasi Gambar
Aturan validasi pertama yang dapat Anda tambahkan adalah ukuran maksimum yang diizinkan untuk mengunggah gambar ke aplikasi Anda.
Perbarui objek konfigurasi multi Anda dengan blok kode di bawah ini:
const unggah = multer({
penyimpanan: mesin penyimpanan,
batas: { ukuran file: 1000000 },
});
Di blok kode di atas, Anda menambahkan a batas properti ke objek konfigurasi. Properti ini adalah objek yang menentukan berbagai batasan pada data yang masuk. Anda mengatur ukuran file properti, yang mengatur ukuran file maks dalam byte 1000000, yang setara dengan 1MB.
Aturan validasi lain yang dapat Anda tambahkan adalah fileFilter properti, fungsi opsional untuk mengontrol file mana yang diunggah. Fungsi ini dipanggil untuk setiap file yang diproses. Fungsi ini mengambil parameter yang sama dengan nama file fungsi: persyaratan, mengajukan, Dan cb.
Untuk membuat kode Anda lebih bersih dan lebih dapat digunakan kembali, Anda akan mengabstraksikan semua logika pemfilteran ke dalam sebuah fungsi.
Tambahkan blok kode di bawah ini ke aplikasi.js file untuk mengimplementasikan logika pemfilteran file:
const jalan = memerlukan("jalur");
const checkFileType = fungsi (berkas, cb) {
// Ekstensi file yang diizinkan
const Jenis file = /jpeg|jpg|png|gif|svg/;
//memeriksa perpanjangan nama
const extName = fileTypes.test (path.extname (file.originalname).toLowerCase());
const mimeType = fileTypes.test (file.mimetype);
jika (mimeType && extName) {
kembali cb(batal, BENAR);
} kalau tidak {
cb("Kesalahan: Anda Hanya Dapat Mengunggah Gambar!!");
}
};
Itu checkFileType fungsi mengambil dua parameter: mengajukan Dan cb.
Di blok kode di atas, Anda mendefinisikan a fileTypes variabel yang menyimpan ekspresi regex dengan ekstensi file gambar yang diizinkan. Selanjutnya, Anda menelepon tes metode pada ekspresi regex.
Itu tes metode memeriksa kecocokan dalam string yang diteruskan dan kembali BENAR atau PALSU tergantung pada apakah ia menemukan kecocokan. Kemudian, Anda memberikan nama file yang diunggah, yang dapat Anda akses file.nama asli, ke dalam modul jalur extname metode, yang mengembalikan ekstensi jalur string ke sana. Terakhir, Anda merangkai JavaScript ke Huruf Kecil fungsi string ke ekspresi untuk menangani gambar dengan nama ekstensinya dalam huruf besar.
Memeriksa nama ekstensi saja tidak cukup, karena nama ekstensi dapat diedit dengan mudah. Untuk memastikan bahwa hanya gambar yang diunggah, Anda harus memeriksa tipe MIME juga. Anda dapat mengakses file mimetype properti melalui file.mimetype. Jadi, Anda memeriksa untuk mimetype properti menggunakan tes metode seperti yang Anda lakukan untuk nama ekstensi.
Jika kedua kondisi kembali benar, Anda mengembalikan callback dengan batal dan benar, atau Anda mengembalikan panggilan balik dengan kesalahan.
Akhirnya, Anda menambahkan fileFilter properti untuk konfigurasi multi Anda.
const unggah = multer({
penyimpanan: mesin penyimpanan,
batas: { ukuran file: 10000000 },
fileFilter: (req, file, cb) => {
checkFileType (file, cb);
},
});
Langkah 4: Menggunakan Multer sebagai Express Middleware
Selanjutnya, Anda harus menerapkan penangan rute yang akan menangani pengunggahan gambar.
Multer dapat menangani pengunggahan gambar tunggal dan ganda tergantung pada konfigurasinya.
Tambahkan blok kode di bawah ini ke aplikasi.js file untuk membuat penangan rute untuk unggahan gambar tunggal:
aplikasi.posting("/single", unggah.tunggal("gambar"), (req, res) => {
jika (persyaratan.mengajukan) {
kirim ulang("Berkas tunggal berhasil diunggah");
} kalau tidak {
res.status (400).kirim("Unggah gambar yang valid");
}
});
Di blok kode di atas, Anda memanggil lajang metode pada mengunggah variabel, yang menyimpan konfigurasi multi Anda. Metode ini mengembalikan middleware yang memproses "file tunggal" yang terkait dengan bidang formulir yang diberikan. Kemudian, Anda melewati gambar sebagai bidang formulir.
Terakhir, periksa apakah file diunggah melalui persyaratan objek di mengajukan Properti. Jika ya, Anda mengirim pesan sukses, jika tidak, Anda mengirim pesan kesalahan.
Tambahkan blok kode di bawah ini ke aplikasi.js file untuk membuat penangan rute untuk banyak unggahan gambar:
aplikasi.posting("/multiple", unggah.array("gambar-gambar", 5), (req, res) => {
jika (persyaratan.file) {
kirim ulang("Beberapa file berhasil diunggah");
} kalau tidak {
res.status (400).kirim("Unggah gambar yang valid");
}
});
Di blok kode di atas, Anda memanggil Himpunan metode pada mengunggah variabel, yang menyimpan konfigurasi multi Anda. Metode ini membutuhkan dua argumen—nama bidang dan jumlah maksimum—dan mengembalikan middleware yang memproses banyak file dengan nama bidang yang sama. Kemudian, Anda lulus gambar-gambar sebagai bidang formulir bersama dan 5 sebagai jumlah maksimum gambar yang dapat diunggah sekaligus.
Keuntungan Menggunakan Multer
Menggunakan Multer di aplikasi Node.js Anda menyederhanakan proses pengunggahan dan penyimpanan gambar yang rumit secara langsung di server Anda. Multer juga didasarkan pada busboy, sebuah modul Node.js untuk mem-parsing data formulir yang masuk, membuatnya sangat efisien untuk mem-parsing data formulir.
