Tải lên tệp multipart/form-data nodejs

Bất cứ khi nào chúng tôi gửi biểu mẫu ở phía máy khách của bất kỳ trang web nào, tất cả dữ liệu biểu mẫu sẽ chuyển đến phía máy chủ. Thông thường, dữ liệu biểu mẫu được mã hóa trước khi chúng tôi gửi nó đến máy chủ. Chúng ta có thể làm điều này bằng cách chỉ định thuộc tính enctype trong thẻ

npm install formidable

5 trong HTML

Nếu chúng tôi không chỉ định nó, dữ liệu biểu mẫu sẽ được mã hóa với loại mặc định

Giới thiệu

Đây thường là trường hợp khi chúng tôi xử lý dữ liệu chỉ có văn bản như tên, email, mật khẩu, v.v. Nhưng nếu chúng tôi đang tải lên một số loại tệp, chúng tôi cần chỉ định thuộc tính enctype với giá trị “multipart/form-data”. Chúng tôi cần giá trị này khi chúng tôi đang sử dụng biểu mẫu có kiểm soát tệp tải lên

Trong bài viết này, chúng ta sẽ tìm hiểu cách tải tệp lên bằng cách sử dụng nút. js, express và ghê gớm. Ghê gớm là một nút. js để phân tích cú pháp dữ liệu biểu mẫu, đặc biệt là tệp tải lên

điều kiện tiên quyết

1. Hiểu biết tốt về Node. js và NPM
2. MongoDB phải được cài đặt trong thiết bị của bạn và bạn cần có hiểu biết cơ bản về cơ sở dữ liệu
3. Hiểu biết tốt về dòng lệnh hoặc thiết bị đầu cuối tích hợp trong trình chỉnh sửa mã

Mục tiêu của hướng dẫn này

• Cách thiết kế điểm cuối API để đăng dữ liệu biểu mẫu nhiều phần
• Cách sử dụng Formidable để xử lý tệp tải lên
• Cách quản lý và lưu trữ các tệp đó ở phía máy chủ
• Cách xem các file đó trên Frontend

Tuy nhiên, vì một nửa số chủ đề này đã được đề cập trong bài viết trước của tôi, do đó tôi sẽ tham khảo bài viết đó bất cứ khi nào cần thiết

Thiết lập dự án

Để thiết lập dự án, bạn có thể tham khảo bài viết trước của tôi. Bạn phải làm theo từng bước cho đến khi tôi giới thiệu về Multer

Các bước cơ bản liên quan như sau

1. Cấu trúc thư mục
2. Thiết lập MongoDB với Mongoose và
3. Hiển thị tệp HTML

Ngoài ra, để tham khảo. ứng dụng của bạn. js và cấu trúc thư mục sẽ trông như thế này

Cấu trúc thư mục

├───model (folder) 

│ └───fileSchema.js (file) 

├───node_modules (folder) 

├───public (folder) 

│ └───css (folder), files(folder) 

|──────└───style.css (file) 

|───views (folder) 

│────└───index.ejs (file) 

├───app.js (file) 

├───package-lock.json (file) 

├───package.json (file) 

├───server.js (file) 

Ghê gớm

Như đã đề cập trước đó,

npm install formidable

6 là một Nút. js để phân tích cú pháp dữ liệu biểu mẫu, đặc biệt là tệp tải lên

Hãy bắt đầu bằng cách cài đặt ghê gớm

Viết lệnh này trong thiết bị đầu cuối của bạn

npm install formidable

Sau khi cài đặt gói, chúng tôi sẽ nhập gói đó ở đầu ứng dụng. tập tin js

const formidable = require("formidable");

Sau đó, chúng tôi sẽ tạo một điểm cuối API để tải tệp lên

Ghi chú. Đảm bảo rằng điểm cuối được sử dụng để hiển thị trang nằm ở cuối tất cả các điểm cuối API

// API Endpoint for uploading file
app.post("/api/uploadFile", (req, res) => {
  // Stuff to be added soon
});

Hãy bắt đầu sử dụng ghê gớm

Gói hoạt động bằng cách tạo một phiên bản của dữ liệu biểu mẫu đến từ phía máy khách. Nó sẽ là một thể hiện đối tượng với một số cặp khóa-giá trị mặc định mà chúng ta có thể thay đổi theo yêu cầu của mình

Chúng ta hãy xem nó

Thêm đoạn mã này vào chức năng gọi lại API ở trên

const form = formidable.IncomingForm();
console.log(form);

Chúng tôi có thể xem dữ liệu biểu mẫu bằng cách gửi yêu cầu với các tệp trên API này. Tuy nhiên, trước đó, chúng ta cần thực hiện những thay đổi nhỏ trong mã HTML của mình. e. trong tệp

npm install formidable

7

Thay đổi giá trị của thuộc tính hành động trong biểu mẫu thành

npm install formidable

8

<form action="/api/uploadFile" enctype="multipart/form-data" method="POST">
  <input type="file" class="admin__input" id="myFile" name="myFile" />
  <input class="admin__submit" type="submit" />
form>

Nếu bạn tải nội dung nào đó lên từ trang web được hiển thị của mình sau khi khởi động lại máy chủ, bạn sẽ thấy nội dung như thế này trên thiết bị đầu cuối của mình

├───model (folder) 

│ └───fileSchema.js (file) 

├───node_modules (folder) 

├───public (folder) 

│ └───css (folder), files(folder) 

|──────└───style.css (file) 

|───views (folder) 

│────└───index.ejs (file) 

├───app.js (file) 

├───package-lock.json (file) 

├───package.json (file) 

├───server.js (file) 

0

Như bạn có thể thấy, chúng tôi có nhiều thuộc tính trong đối tượng này bao gồm

npm install formidable

9,

const formidable = require("formidable");

0, v.v. Với các thuộc tính này, chúng tôi có thể định cấu hình đáng gờm trong đặc điểm kỹ thuật của mình

Chúng ta phải tạo một biến trỏ đến thư mục/thư mục mà chúng ta muốn lưu trữ các tệp. Để thực hiện việc này, hãy thêm đoạn mã sau sau khi tạo phiên bản biểu mẫu

├───model (folder) 

│ └───fileSchema.js (file) 

├───node_modules (folder) 

├───public (folder) 

│ └───css (folder), files(folder) 

|──────└───style.css (file) 

|───views (folder) 

│────└───index.ejs (file) 

├───app.js (file) 

├───package-lock.json (file) 

├───package.json (file) 

├───server.js (file) 

3

Bây giờ, biến

const formidable = require("formidable");

1 của chúng tôi trỏ đến thư mục trong thư mục

const formidable = require("formidable");

2 hiện ở cấp cơ sở của dự án của chúng tôi

Bây giờ, hãy thay đổi cấu hình bằng cách thay đổi một số thuộc tính trong phiên bản biểu mẫu

├───model (folder) 

│ └───fileSchema.js (file) 

├───node_modules (folder) 

├───public (folder) 

│ └───css (folder), files(folder) 

|──────└───style.css (file) 

|───views (folder) 

│────└───index.ejs (file) 

├───app.js (file) 

├───package-lock.json (file) 

├───package.json (file) 

├───server.js (file) 

6

1. Thuộc tính

   const formidable = require("formidable");
   

   3 được đặt thành false theo mặc định như đã thấy trong đối tượng biểu mẫu mà chúng tôi đã đăng nhập trong bảng điều khiển. Chúng tôi có thể đặt nó thành true để người dùng có thể thêm nhiều tệp cùng một lúc. Ngoài ra, chúng tôi phải thêm nhiều thuộc tính trong thẻ đầu vào trong HTML để đảm bảo rằng người dùng có thể tải lên nhiều tệp

2. Chúng tôi có thể hạn chế kích thước của tệp mà người dùng tải lên. Mặc định là 200 MB nhưng chúng tôi đang giới hạn ở mức 5 MB

3. Và cuối cùng nhưng không kém phần quan trọng, chúng ta phải thay đổi thư mục tải lên thành thư mục chúng ta đã tạo

Bạn cũng có thể thay đổi nhiều thuộc tính khác, nhưng điều này là đủ cho hầu hết các trường hợp sử dụng

Nếu chúng tôi đăng nhập phiên bản biểu mẫu trong bảng điều khiển của mình một lần nữa, chúng tôi có thể thấy sự khác biệt trong các thuộc tính được đề cập ở trên

├───model (folder) 

│ └───fileSchema.js (file) 

├───node_modules (folder) 

├───public (folder) 

│ └───css (folder), files(folder) 

|──────└───style.css (file) 

|───views (folder) 

│────└───index.ejs (file) 

├───app.js (file) 

├───package-lock.json (file) 

├───package.json (file) 

├───server.js (file) 

8

Vì chúng tôi đã hoàn thành cấu hình cơ bản của mình, chúng tôi có thể bắt đầu phân tích cú pháp các tệp của mình. Để làm điều này, chúng tôi sử dụng chức năng phân tích cú pháp tích hợp mà chúng tôi có thể gọi trên phiên bản biểu mẫu của mình

Thêm đoạn mã này bên dưới cấu hình

npm install formidable

0

phân tích cú pháp (yêu cầu, gọi lại)

Hàm “phân tích cú pháp” phân tích cú pháp một Nút đến. yêu cầu js chứa dữ liệu biểu mẫu. Nếu một cuộc gọi lại được cung cấp, tất cả các trường và tệp sẽ được thu thập và chuyển đến cuộc gọi lại

Chúng tôi mong muốn phân tích cú pháp và lưu trữ các tệp này theo nhu cầu của riêng mình, do đó chúng tôi cần xem xét chúng trước khi làm việc với chúng. Do đó, chúng tôi có hai câu lệnh nhật ký để xem dữ liệu chúng tôi nhận được trong hàm gọi lại

Ngoài ra, chúng tôi sẽ xử lý mọi lỗi có thể phát sinh ở bước đầu tiên. Điều này là do chúng tôi không muốn phân tích cú pháp bất kỳ tệp nào có một số lỗi tiềm ẩn. Chúng tôi làm điều này bằng cách kiểm tra xem có bất kỳ lỗi nào không. Nếu chúng tôi gặp phải bất kỳ vấn đề nào, chúng tôi có thể gửi phản hồi với mã trạng thái là 400, mô tả một yêu cầu không hợp lệ

Nếu bạn thấy mã này bằng cách gửi tệp, bạn sẽ thấy nhật ký của dữ liệu biểu mẫu được phân tích cú pháp trong bảng điều khiển. Lưu ý rằng một tệp mới đã được tạo trong thư mục tệp của bạn ở chế độ công khai. Tuy nhiên, tệp đó sẽ không thể đọc được vì chưa có phần mở rộng cho tệp

Dữ liệu đã ghi của bạn sẽ trông giống như thế này

npm install formidable

1

Đối tượng

const formidable = require("formidable");

4 trống và chúng tôi không muốn nó. Trong đối tượng tệp, chúng ta có thể thấy tên của thẻ đầu vào (

const formidable = require("formidable");

5) như chúng ta đã đề cập trong HTML của mình. Chúng tôi thậm chí có quyền truy cập vào tên của tệp có phần mở rộng ban đầu. Tất cả thông tin này sẽ giúp chúng tôi lưu và quản lý các tệp của mình chính xác hơn

Trước khi tiếp tục, chúng ta phải xem xét một trường hợp đặc biệt. Vì người dùng có thể tải lên nhiều tệp cùng một lúc nên dữ liệu được phân tích cú pháp đến sẽ là một mảng các đối tượng. Vì vậy, mỗi lần chúng tôi phải kiểm tra xem chúng tôi đang nhận được nhiều tệp hay một tệp trước khi tiếp tục xử lý.

Dữ liệu có nhiều tệp trông giống như thế này

npm install formidable

2

Bước tiếp theo

1. Chúng tôi sẽ xử lý các tệp đơn lẻ và nhiều tệp riêng biệt
2. Trong cả hai trường hợp, chúng tôi sẽ kiểm tra xem tệp có hợp lệ hay không bằng cách tạo một chức năng riêng
3. Nếu tệp không hợp lệ, thì chúng tôi sẽ báo lỗi. Nếu đúng như vậy, chúng tôi sẽ đổi tên nó và lưu trữ tên tệp trong cơ sở dữ liệu của chúng tôi

Bây giờ, hãy thêm đoạn mã này và sau đó chúng ta sẽ thực hiện từng bước

npm install formidable

3

1. Ở bước đầu tiên, chúng tôi đang kiểm tra xem người dùng có tải lên nhiều tệp hay không. Chúng tôi đang làm điều này bằng cách kiểm tra độ dài của thuộc tính myFile trong tệp dữ liệu được phân tích cú pháp. Nếu độ dài bằng 0, thì điều đó có nghĩa là chỉ có một tệp duy nhất được tải lên

2. Bước tiếp theo là xem tệp đã tải lên có hợp lệ hay không. Chúng tôi đang làm điều này bằng cách tạo một chức năng đặc biệt giống như thế này

npm install formidable

4

Trong chức năng này, chúng tôi đang trích xuất phần mở rộng ban đầu của tệp đã tải lên. Nếu nó tồn tại trong mảng tiện ích mở rộng hợp lệ được mô tả của chúng tôi, thì chúng tôi có thể trả về true, nếu không, chúng tôi trả về false

1. Chúng tôi đang tạo một tên tệp hợp lệ bằng cách xóa tất cả "khoảng trắng" bằng "dấu gạch ngang". Điều này được thực hiện thông qua sự trợ giúp của Biểu thức chính quy và hàm

   const formidable = require("formidable");
   

   6

2. Nếu tệp không hợp lệ, chúng tôi sẽ báo lỗi. Nếu đúng như vậy, chúng tôi đang đổi tên tệp trong thư mục tệp của mình với sự trợ giúp của mô-đun

   const formidable = require("formidable");
   

   7, mô-đun cốt lõi trong Node. js

Đừng quên nhập mô-đun

const formidable = require("formidable");

7 ở đầu tệp của bạn

Sau đó, chúng tôi có thể lưu trữ tên của tệp trong cơ sở dữ liệu đám mây MongoDB mà chúng tôi đã lưu trữ trước đó trong hướng dẫn này

Hãy thử hoàn thành khối khác cho nhiều tệp của riêng bạn. Đây là toàn bộ chức năng tải lên cho mục đích tham khảo

Với điều này, nếu bạn cố gắng tải lên một tệp hoặc hình ảnh có phần mở rộng hợp lệ. Nó sẽ được lưu trong thư mục tệp của bạn với định nghĩa tên mà chúng tôi đã xác định. Ngoài ra, tên tệp được lưu trữ trong cơ sở dữ liệu đám mây của bạn để bạn có thể truy cập nó trên giao diện người dùng của chúng tôi

Xem các tệp này trên giao diện người dùng

Để tìm hiểu cách chúng tôi có thể xem các tệp này, bạn có thể tham khảo lại bài viết trước của tôi

Đáng gờm vs Multer

Bài viết trước của tôi là về Multer và bài viết này là về Formidable. Cả hai đều là gói npm nhưng một gói đóng vai trò là mô-đun và một gói làm phần mềm trung gian

Tôi thấy làm việc với

npm install formidable

6 đơn giản hơn do thực tế là việc cấu hình

// API Endpoint for uploading file
app.post("/api/uploadFile", (req, res) => {
  // Stuff to be added soon
});

0 phức tạp hơn nhiều. Tuy nhiên, có một số trường hợp sử dụng mà bạn sẽ phải làm việc với Multer

Chẳng hạn, nếu bạn chọn thay đổi kích thước hình ảnh trước khi lưu chúng trên máy chủ của mình, thì multer cung cấp một thứ gọi là

// API Endpoint for uploading file
app.post("/api/uploadFile", (req, res) => {
  // Stuff to be added soon
});

1 có thể giúp bạn