Cara Mengunggah Gambar di Node.js Menggunakan Multer

Ada tiga cara utama menangani unggahan file di Node.js: menyimpan gambar langsung ke server Anda, menyimpan data biner gambar 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 belajar cara menggunakan Multer, 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 repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT.

Pertama, buat folder proyek dan pindahkan ke dalamnya dengan menjalankan perintah berikut:

mkdir multer-tutorial
cd multer-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 tangguh 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 node dengan menjalankan:

npm install express multer

Selanjutnya, buat app.js file di direktori root proyek Anda dan tambahkan blok kode di bawah ini untuk membuat server Express dasar:


const express = require('express');
const app = express();
const port = process.env.PORT || 3000;
app.listen(port, ()=>{
console.log(`App is listening on port ${port}`);
});

Langkah 2: Mengonfigurasi Multer

Pertama, impor banyak di kamu app.js mengajukan.

const multer = require("multer");

banyak membutuhkan mesin penyimpanan yang berisi informasi tentang direktori tempat file yang diunggah akan disimpan dan bagaimana file akan diberi nama.

SEBUAH banyak mesin penyimpanan dibuat dengan memanggil penyimpanan disk metode pada impor banyak modul. Metode ini mengembalikan PenyimpananMesin implementasi dikonfigurasi untuk menyimpan file pada sistem file lokal.

See also  Cara Meminimalkan Jumlah Information yang Digunakan Apple Music

Dibutuhkan objek konfigurasi dengan dua properti: tujuanyang merupakan string atau fungsi yang menentukan di mana gambar yang diunggah akan disimpan.

Properti kedua, nama file, adalah fungsi yang menentukan nama file yang diunggah. Dibutuhkan tiga parameter: permintaan, mengajukandan panggilan balik (cb). permintaan 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 app.js file untuk membuat mesin penyimpanan:


const storageEngine = multer.diskStorage({
destination: "./images",
filename: (req, file, cb) => {
cb(null, `${Date.now()}--${file.originalname}`);
},
});

Di blok kode di atas, Anda mengatur tujuan properti untuk”./gambar-gambar”, dengan demikian, gambar akan disimpan di direktori proyek Anda di gambar-gambar map. Kemudian, dalam panggilan balik, Anda lulus batal sebagai kesalahan dan string template sebagai nama file. String template terdiri dari stempel waktu yang dihasilkan dengan memanggil Tanggal.sekarang() untuk memastikan bahwa nama gambar selalu unik, dua tanda hubung untuk memisahkan nama file dan stempel waktu, dan 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 banyak dengan mesin penyimpanan.

Tambahkan blok kode di bawah ini ke app.js file untuk menginisialisasi multi dengan mesin penyimpanan:


const upload = multer({
storage: storageEngine,
});

banyak mengembalikan instance Multer yang menyediakan beberapa metode untuk menghasilkan middleware yang memproses file yang diunggah multipart/form-data format.

Di blok kode di atas, Anda melewati objek konfigurasi dengan a penyimpanan properti diatur ke mesin penyimpananyang merupakan mesin penyimpanan yang Anda buat sebelumnya.

Saat ini, konfigurasi Multer Anda telah 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 sebuah gambar diunggah ke aplikasi Anda.

Perbarui objek konfigurasi multi Anda dengan blok kode di bawah ini:

See also  Cara Kerja Scoping di JavaScript

const upload = multer({
storage: storageEngine,
limits: { fileSize: 1000000 },
});

Di blok kode di atas, Anda menambahkan batas properti ke objek konfigurasi. Properti ini adalah objek yang menentukan berbagai batasan pada data yang masuk. Anda mengatur ukuran file properti, yang dengannya ukuran file maksimum dalam byte diatur ke 1000000yang 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: permintaan, mengajukandan cb.

Untuk membuat kode Anda lebih bersih dan lebih dapat digunakan kembali, Anda akan mengabstraksikan semua logika pemfilteran menjadi suatu fungsi.

Tambahkan blok kode di bawah ini ke app.js file untuk mengimplementasikan logika pemfilteran file:

const path = require("path");
const checkFileType = function (file, cb) {
const fileTypes = /jpeg|jpg|png|gif|svg/;
//check extension names
const extName = fileTypes.test(path.extname(file.originalname).toLowerCase());
const mimeType = fileTypes.test(file.mimetype);
if (mimeType && extName) {
return cb(null, true);
} else {
cb("Error: You can Only Upload Images!!");
}
};

Itu periksaJenis File fungsi membutuhkan dua parameter: mengajukan dan cb.

Di blok kode di atas, Anda mendefinisikan jenis file variabel yang menyimpan ekspresi regex dengan ekstensi file gambar yang diizinkan. Selanjutnya, Anda memanggil uji metode pada ekspresi regex.

Itu uji metode memeriksa kecocokan dalam string yang diteruskan dan mengembalikan BENAR atau Salah tergantung pada apakah ia menemukan kecocokan. Kemudian, Anda memberikan nama file yang diunggah, yang dapat Anda akses melalui file.nama aslike dalam modul jalur extname metode, yang mengembalikan ekstensi jalur string ke sana. Akhirnya, Anda merantai JavaScript keKasus Kecil fungsi string ke ekspresi untuk menangani gambar dengan nama ekstensinya dalam huruf besar.

Memeriksa nama ekstensi saja tidak cukup, karena nama ekstensi dapat dengan mudah diedit. Untuk memastikan bahwa hanya gambar yang diunggah, Anda harus memeriksa jenis MIME juga. Anda dapat mengakses file mimetype properti melalui file.mimetype. Jadi, Anda memeriksa mimetype properti menggunakan uji metode seperti yang Anda lakukan untuk nama ekstensi.

See also  Cara Mengonversi Format File Gambar Menggunakan Python

Jika kedua kondisi kembali benar, Anda mengembalikan panggilan balik dengan batal dan benar, atau Anda mengembalikan panggilan balik dengan kesalahan.

Akhirnya, Anda menambahkan fileFilter properti untuk konfigurasi multi Anda.

const upload = multer({
storage: storageEngine,
limits: { fileSize: 10000000 },
fileFilter: (req, file, cb) => {
checkFileType(file, cb);
},
});

Langkah 4: Menggunakan Multer sebagai Express Middleware

Selanjutnya, Anda harus mengimplementasikan pengendali rute yang akan menangani unggahan gambar.

Multer dapat menangani unggahan gambar tunggal dan ganda tergantung pada konfigurasinya.

Tambahkan blok kode di bawah ini ke app.js file untuk membuat penangan rute untuk unggahan gambar tunggal:

app.post("/single", upload.single("image"), (req, res) => {
if (req.file) {
res.send("Single file uploaded successfully");
} else {
res.status(400).send("Please upload a valid image");
}
});

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 telah diunggah melalui permintaan objek di mengajukan Properti. Jika ya, Anda mengirim pesan sukses, jika tidak, Anda mengirim pesan kesalahan.

Tambahkan blok kode di bawah ini ke app.js file untuk membuat penangan rute untuk beberapa unggahan gambar:

app.post("/multiple", upload.array("images", 5), (req, res) => {
if (req.files) {
res.send("Muliple files uploaded successfully");
} else {
res.status(400).send("Please upload a valid images");
}
});

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 beberapa file yang berbagi nama bidang yang sama. Lalu, kamu 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, modul Node.js untuk menguraikan data formulir yang masuk, sehingga sangat efisien untuk menguraikan data formulir.