Cách tải lên hình ảnh trong Node.js bằng Multer

Có ba cách chính để xử lý việc tải lên tệp trong Node.js: lưu hình ảnh trực tiếp vào máy chủ của bạn, lưu dữ liệu nhị phân của hình ảnh hoặc dữ liệu chuỗi base64 vào cơ sở dữ liệu của bạn và sử dụng bộ chứa S3 của Amazon Web Service (AWS) để lưu và quản lý hình ảnh.

Tại đây, bạn sẽ học cách sử dụng Multer, một phần mềm trung gian của Node.js, để tải lên và lưu hình ảnh trực tiếp vào máy chủ của bạn trong các ứng dụng Node.js trong một vài bước.

Bước 1: Thiết lập môi trường phát triển

Mã được sử dụng trong dự án này có sẵn trong kho lưu trữ GitHub và miễn phí cho bạn sử dụng theo giấy phép MIT.

Đầu tiên, tạo một thư mục dự án và chuyển vào đó bằng cách chạy lệnh sau:

mkdir multer-tutorial
cd multer-tutorial

Tiếp theo, khởi tạo npm trong thư mục dự án của bạn bằng cách chạy:

npm init -y

Tiếp theo, bạn sẽ cần cài đặt một số phụ thuộc. Các yếu tố phụ thuộc cần thiết cho hướng dẫn này bao gồm:

• Thể hiện: Express là một khung công tác Node.js cung cấp một tập hợp các tính năng mạnh mẽ cho các ứng dụng web và di động. Nó giúp việc xây dựng các ứng dụng phụ trợ với Node.js trở nên dễ dàng hơn.
• Multer: Multer là một phần mềm trung gian cấp tốc giúp đơn giản hóa việc tải lên và lưu hình ảnh vào máy chủ của bạn.

Cài đặt các gói với trình quản lý gói nút bằng cách chạy:

npm install express multer

Tiếp theo, tạo một app.js tệp trong thư mục gốc của dự án của bạn và thêm khối mã bên dưới để tạo một máy chủ Express cơ bản:

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

Bước 2: Định cấu hình Multer

Đầu tiên, nhập multer trong của bạn app.js tập tin.

const multer = require("multer");

multer yêu cầu một công cụ lưu trữ chứa thông tin về thư mục nơi các tệp đã tải lên sẽ được lưu trữ và cách các tệp sẽ được đặt tên.

Một multer công cụ lưu trữ được tạo bằng cách gọi diskStorage phương pháp nhập khẩu multer mô-đun. Phương thức này trả về một Công cụ lưu trữ triển khai được cấu hình để lưu trữ tệp trên hệ thống tệp cục bộ.

Nó có một đối tượng cấu hình với hai thuộc tính: điểm đếnlà một chuỗi hoặc hàm chỉ định nơi các hình ảnh đã tải lên sẽ được lưu trữ.

Thuộc tính thứ hai, tên tập tin, là một chức năng xác định tên của các tệp được tải lên. Nó có ba tham số: yêu cầu, tập tinvà một cuộc gọi lại (cb). yêu cầu là Express Lời yêu cầu sự vật, tập tin là một đối tượng chứa thông tin về tệp đã xử lý và cb là một lệnh gọi lại xác định tên của các tệp đã tải lên. Hàm gọi lại lấy lỗi và tên tệp làm đối số.

Thêm khối mã bên dưới vào app.js tệp để tạo công cụ lưu trữ:

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

Trong khối mã ở trên, bạn đặt điểm đến tài sản để ”./images”, Do đó, hình ảnh sẽ được lưu trữ trong thư mục dự án của bạn trong một hình ảnh thư mục. Sau đó, trong cuộc gọi lại, bạn đã vượt qua vô giá trị dưới dạng lỗi và một chuỗi mẫu làm tên tệp. Chuỗi mẫu bao gồm một dấu thời gian được tạo bằng cách gọi Date.now () để đảm bảo rằng tên hình ảnh luôn là duy nhất, hai dấu gạch nối để phân tách tên tệp và dấu thời gian cũng như tên gốc của tệp, có thể được truy cập từ tập tin sự vật.

Các chuỗi kết quả từ mẫu này sẽ giống như sau: 1663080276614 – example.jpg.

Tiếp theo, bạn cần khởi tạo multer với bộ máy lưu trữ.

Thêm khối mã bên dưới vào app.js tệp để khởi tạo multer với công cụ lưu trữ:

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

multer trả về một phiên bản Multer cung cấp một số phương pháp để tạo phần mềm trung gian xử lý các tệp được tải lên trong đa phần / biểu mẫu-dữ liệu định dạng.

Trong khối mã ở trên, bạn chuyển một đối tượng cấu hình với kho tài sản được đặt thành Công cụ lưu trữlà công cụ lưu trữ bạn đã tạo trước đó.

Hiện tại, cấu hình Multer của bạn đã hoàn tất, nhưng không có quy tắc xác thực nào đảm bảo rằng chỉ có thể lưu hình ảnh trên máy chủ của bạn.

Bước 3: Thêm quy tắc xác thực hình ảnh

Quy tắc xác thực đầu tiên bạn có thể thêm là kích thước tối đa được phép tải lên ứng dụng của bạn.

Cập nhật đối tượng cấu hình nhiều lớp của bạn với khối mã bên dưới:

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

Trong khối mã ở trên, bạn đã thêm một Hạn mức thuộc tính của đối tượng cấu hình. Thuộc tính này là một đối tượng chỉ định các giới hạn khác nhau đối với dữ liệu đến. Bạn đặt Kích thước tập tin thuộc tính mà kích thước tệp tối đa tính bằng byte được đặt thành 1000000tương đương với 1MB.

Một quy tắc xác thực khác mà bạn có thể thêm là fileFilter thuộc tính, một chức năng tùy chọn để kiểm soát tệp nào được tải lên. Hàm này được gọi cho mọi tệp được xử lý. Hàm này nhận các tham số giống như tên tập tin hàm số: yêu cầu, tập tinvà cb.

Để làm cho mã của bạn sạch hơn và có thể tái sử dụng nhiều hơn, bạn sẽ tóm tắt tất cả logic lọc thành một hàm.

Thêm khối mã bên dưới vào app.js tệp để triển khai logic lọc tệp:

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!!");
}
};

Các checkFileType hàm nhận hai tham số: tập tin và cb.

Trong khối mã ở trên, bạn đã xác định một loại tập tin biến lưu trữ một biểu thức regex với các phần mở rộng tệp hình ảnh được phép. Tiếp theo, bạn gọi kiểm tra phương thức trên biểu thức regex.

Các kiểm tra phương thức kiểm tra sự phù hợp trong chuỗi đã truyền và trả về thật hoặc sai tùy thuộc vào việc nó có tìm thấy một kết quả phù hợp hay không. Sau đó, bạn chuyển tên tệp đã tải lên, mà bạn có thể truy cập thông qua file.originalnamevào mô-đun của đường dẫn extname phương thức, trả về phần mở rộng của đường dẫn chuỗi đến nó. Cuối cùng, bạn xâu chuỗi JavaScript toLowerCase hàm chuỗi vào biểu thức để xử lý các hình ảnh có tên phần mở rộng của chúng bằng chữ hoa.

Chỉ kiểm tra tên tiện ích mở rộng là không đủ, vì tên tiện ích mở rộng có thể dễ dàng chỉnh sửa. Để đảm bảo rằng chỉ hình ảnh được tải lên, bạn cũng phải kiểm tra loại MIME. Bạn có thể truy cập một tệp mimetype tài sản thông qua file.mimetype. Vì vậy, bạn kiểm tra mimetype tài sản sử dụng kiểm tra như bạn đã làm cho các tên tiện ích mở rộng.

Nếu hai điều kiện trả về true, bạn trả về lệnh gọi lại với vô giá trị và true, hoặc bạn trả lại lệnh gọi lại có lỗi.

Cuối cùng, bạn thêm fileFilter thuộc tính cấu hình multer của bạn.

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

Bước 4: Sử dụng Multer làm phần mềm trung gian Express

Tiếp theo, bạn phải triển khai các trình xử lý định tuyến sẽ xử lý việc tải lên hình ảnh.

Multer có thể xử lý cả tải lên một hình và nhiều hình ảnh tùy thuộc vào cấu hình.

Thêm khối mã bên dưới vào app.js tệp để tạo trình xử lý tuyến đường cho các lần tải lên hình ảnh:

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");
}
});

Trong khối mã ở trên, bạn đã gọi Độc thân phương pháp trên tải lên biến, lưu trữ cấu hình nhiều lớp của bạn. Phương thức này trả về một phần mềm trung gian xử lý một “tệp đơn” được liên kết với trường biểu mẫu nhất định. Sau đó, bạn đã vượt qua hình ảnh dưới dạng trường biểu mẫu.

Cuối cùng, hãy kiểm tra xem một tệp đã được tải lên thông qua yêu cầu đối tượng trong tập tin tài sản. Nếu đúng như vậy, bạn gửi thông báo thành công, nếu không, bạn sẽ gửi thông báo lỗi.

Thêm khối mã bên dưới vào app.js tệp để tạo trình xử lý định tuyến cho nhiều lần tải lên hình ảnh:

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");
}
});

Trong khối mã ở trên, bạn đã gọi mảng phương pháp trên tải lên biến, lưu trữ cấu hình nhiều lớp của bạn. Phương thức này nhận hai đối số — một tên trường và một số lượng tối đa — và trả về phần mềm trung gian xử lý nhiều tệp chia sẻ cùng một tên trường. Sau đó, bạn đã vượt qua hình ảnh dưới dạng trường biểu mẫu được chia sẻ và 5 là số lượng hình ảnh tối đa có thể được tải lên cùng một lúc.

Ưu điểm của việc sử dụng Multer

Sử dụng Multer trong các ứng dụng Node.js của bạn sẽ đơn giản hóa quá trình tải lên và lưu hình ảnh trực tiếp trên máy chủ của bạn rất phức tạp. Multer cũng dựa trên busboy, một mô-đun Node.js để phân tích dữ liệu biểu mẫu đến, làm cho nó rất hiệu quả để phân tích dữ liệu biểu mẫu.