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 HTMLNế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
- Hiểu biết tốt về Node. js và NPM
- 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
- 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
- Cấu trúc thư mục
- Thiết lập MongoDB với Mongoose và
- 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ênHã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
7Thay đổi giá trị của thuộc tính hành động trong biểu mẫu thành
npm install formidable
8
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]
0Như 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ìnhChú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]
3Bâ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ôiBâ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]
6Thuộc tính
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ệpconst formidable = require["formidable"];
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
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]
8Vì 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
0phâ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ơnTrướ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
2Bước tiếp theo
- Chúng tôi sẽ xử lý các tệp đơn lẻ và nhiều tệp riêng biệt
- 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
- 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Ở 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
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
4Trong 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
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
6const formidable = require["formidable"];
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
7, mô-đun cốt lõi trong Node. jsconst formidable = require["formidable"];
Đừng quên nhập mô-đun
const formidable = require["formidable"];
7 ở đầu tệp của bạnSau đó, 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 MulterChẳ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