Ghi chú của biên tập viên. Bài viết này được cập nhật lần cuối vào ngày 24 tháng 3 năm 2022 để phản ánh các bản cập nhật cho Node. js và thư viện
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]1
Multer là một nút. js để xử lý
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]2 giúp quá trình tải lên các tệp trong Node trở nên khó khăn hơn. js dễ dàng hơn nhiều. Trong bài viết này, chúng ta sẽ tìm hiểu mục đích của Multer trong việc xử lý các tệp trong biểu mẫu đã gửi. Chúng ta cũng sẽ khám phá Multer bằng cách xây dựng một ứng dụng nhỏ có giao diện người dùng và phần phụ trợ để kiểm tra việc tải tệp lên. Bắt đầu nào
Mục lục
Quản lý đầu vào của người dùng trong các biểu mẫu
Các ứng dụng web nhận tất cả các loại đầu vào khác nhau từ người dùng, bao gồm văn bản, điều khiển đồ họa như hộp kiểm hoặc nút radio và tệp, như hình ảnh, video và phương tiện khác
Trong các biểu mẫu, mỗi đầu vào này được gửi tới một máy chủ xử lý đầu vào, sử dụng chúng theo một cách nào đó, có thể lưu chúng ở một nơi khác, sau đó cung cấp cho giao diện người dùng một phản hồi
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]3 hoặc
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]4
Khi gửi biểu mẫu có chứa đầu vào văn bản, máy chủ, Nút. js trong trường hợp của chúng tôi, có ít việc phải làm hơn. Sử dụng Express, bạn có thể dễ dàng lấy tất cả các đầu vào được nhập trong đối tượng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]5. Tuy nhiên, việc gửi biểu mẫu có tệp phức tạp hơn một chút vì chúng cần xử lý nhiều hơn, đó là lý do Multer xuất hiện
Mã hóa và tải lên các biểu mẫu với Multer
Tất cả các biểu mẫu bao gồm một thuộc tính
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]6, chỉ định cách trình duyệt sẽ mã hóa dữ liệu trước khi gửi đến máy chủ. Giá trị mặc định là
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]7, hỗ trợ dữ liệu chữ và số. Loại mã hóa khác là
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]2, liên quan đến việc tải tệp lên thông qua các biểu mẫu
Có hai cách để tải lên biểu mẫu với mã hóa
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]2. Đầu tiên là bằng cách sử dụng thuộc tính
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]6
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]0
Đoạn mã trên gửi dữ liệu biểu mẫu đến đường dẫn
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]11 của ứng dụng của bạn. Thứ hai là bằng cách sử dụng API
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]12. API
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]12 cho phép chúng tôi tạo biểu mẫu
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]2 với các cặp khóa-giá trị có thể được gửi đến máy chủ. Đây là cách nó được sử dụng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]
Khi gửi các biểu mẫu như vậy, máy chủ có trách nhiệm phân tích chính xác biểu mẫu và thực hiện thao tác cuối cùng trên dữ liệu
đa năng. một cái nhìn tổng quan
Multer là một phần mềm trung gian được thiết kế để xử lý
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]2 dưới dạng. Nó tương tự như Node phổ biến. js
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]1, được tích hợp vào phần mềm trung gian Express để gửi biểu mẫu. Nhưng, Multer khác ở chỗ nó hỗ trợ dữ liệu nhiều phần, chỉ xử lý biểu mẫu
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]2
Multer thực hiện công việc của
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]1 bằng cách đính kèm các giá trị của trường văn bản trong đối tượng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]5. Multer cũng tạo một đối tượng mới cho nhiều tệp, ______210 hoặc
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]11, chứa thông tin về các tệp đó. Từ đối tượng tệp, bạn có thể chọn bất kỳ thông tin nào được yêu cầu để đăng tệp lên API quản lý phương tiện, như Cloudinary
Bây giờ chúng ta đã hiểu tầm quan trọng của Multer, chúng ta sẽ xây dựng một ứng dụng mẫu nhỏ để cho biết cách một ứng dụng giao diện người dùng có thể gửi ba tệp khác nhau cùng một lúc trong một biểu mẫu và cách Multer có thể xử lý các tệp trên phần phụ trợ, làm cho chúng khả dụng
Xây dựng ứng dụng với sự hỗ trợ của Multer
Chúng tôi sẽ bắt đầu bằng cách xây dựng giao diện người dùng bằng cách sử dụng vanilla HTML, CSS và JavaScript. Tất nhiên, bạn có thể dễ dàng sử dụng bất kỳ khung nào để làm theo
Tạo lối vào của chúng tôi
Đầu tiên, tạo một thư mục có tên là
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]12, sau đó tạo một thư mục khác có tên là
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]13 bên trong. Trong thư mục giao diện người dùng, chúng tôi sẽ có ba tệp tiêu chuẩn,
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]14,
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]15 và
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]16
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]1
Lưu ý rằng chúng tôi đã tạo nhãn và đầu vào cho
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]17 cũng như
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]18. Chúng tôi cũng đã thêm một nút
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]19
Tiếp theo, chúng tôi sẽ thêm CSS để tạo kiểu
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]1
Dưới đây là một ảnh chụp màn hình của trang web cho đến nay
Như bạn có thể thấy, biểu mẫu chúng tôi đã tạo có hai đầu vào,
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]30 và
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]31. Thuộc tính
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]32 được chỉ định trong đầu vào
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]31 cho phép chúng tôi chọn nhiều tệp
Tiếp theo, chúng tôi sẽ gửi biểu mẫu đến máy chủ bằng mã bên dưới
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]3
Có một số điều quan trọng phải xảy ra khi chúng ta sử dụng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]16. Đầu tiên, chúng tôi lấy phần tử
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]35 từ DOM và thêm một sự kiện
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]36 vào đó. Khi gửi, chúng tôi sử dụng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]37 để ngăn hành động mặc định mà trình duyệt sẽ thực hiện khi một biểu mẫu được gửi, hành động này thường chuyển hướng đến giá trị của thuộc tính
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]38. Tiếp theo, chúng tôi lấy phần tử đầu vào
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]30 và
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]31 từ DOM và tạo
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]51
Từ đây, chúng tôi sẽ nối giá trị của đầu vào tên bằng khóa của
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]30 với
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]53. Sau đó, chúng tôi tự động thêm nhiều tệp mà chúng tôi đã chọn vào
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]53 bằng cách sử dụng khóa của
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]31
Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn
Ghi chú. nếu chúng tôi chỉ quan tâm đến một tệp duy nhất, chúng tôi có thể nối thêm
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]56
Cuối cùng, chúng tôi sẽ thêm một yêu cầu
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]57 vào
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]58, đây là API trên phần phụ trợ mà chúng tôi sẽ xây dựng trong phần tiếp theo
Thiết lập máy chủ
Đối với bản demo của chúng tôi, chúng tôi sẽ xây dựng chương trình phụ trợ của mình bằng Node. js và Express. Chúng tôi sẽ thiết lập một API đơn giản trong
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]59 và khởi động máy chủ của chúng tôi trên
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]40. API sẽ nhận được một yêu cầu
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]57 chứa thông tin đầu vào từ biểu mẫu đã gửi
Để sử dụng nút. js cho máy chủ của chúng tôi, chúng tôi sẽ cần thiết lập một Nút cơ bản. dự án js. Trong thư mục gốc của dự án trong thiết bị đầu cuối tại
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]12, hãy chạy đoạn mã sau
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]5
Lệnh trên tạo một
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]43 cơ bản với một số thông tin về ứng dụng của bạn. Tiếp theo, chúng tôi sẽ cài đặt phần phụ thuộc bắt buộc, với mục đích của chúng tôi là Express
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]4
Tiếp theo, tạo tệp
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]44 và thêm đoạn mã sau
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]1
Express chứa đối tượng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]45, là phần mềm trung gian để điền vào
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]5 các đầu vào đã gửi trên một biểu mẫu. Gọi
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]47 thực thi phần mềm trung gian trên mọi yêu cầu được gửi đến máy chủ của chúng tôi
API được thiết lập với
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]48.
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]49 là bộ điều khiển API. Như đã thấy ở trên, chúng tôi chỉ đăng xuất
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]5, sẽ được điền bởi
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]11. Chúng tôi sẽ kiểm tra điều này trong ví dụ dưới đây
Đang chạy const form = new FormData[]
form.append['name', "Dillion"]
form.append['image', ]
1 trong Express
Trong thiết bị đầu cuối của bạn, hãy chạy
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]13 để khởi động máy chủ. Nếu thực hiện đúng, bạn sẽ thấy thông tin sau trong thiết bị đầu cuối của mình
Bây giờ bạn có thể mở ứng dụng giao diện người dùng trong trình duyệt của mình. Điền vào cả hai đầu vào ở giao diện người dùng, tên và tệp, sau đó nhấp vào gửi. Trên phần phụ trợ của bạn, bạn sẽ thấy như sau
Mã trong hình trên có nghĩa là đối tượng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]5 trống, điều này có thể xảy ra. Nếu bạn nhớ lại,
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]1 không hỗ trợ dữ liệu
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]16. Thay vào đó, chúng tôi sẽ sử dụng Multer để phân tích biểu mẫu
Cài đặt và cấu hình Multer
Cài đặt Multer bằng cách chạy lệnh sau trong thiết bị đầu cuối của bạn
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]4
Để định cấu hình Multer, hãy thêm phần sau vào đầu
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]44
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]6
Mặc dù Multer có nhiều tùy chọn cấu hình khác, nhưng chúng tôi chỉ quan tâm đến thuộc tính
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]18 cho dự án của mình, thuộc tính này chỉ định thư mục nơi Multer sẽ lưu các tệp được mã hóa
Tiếp theo, chúng tôi sẽ sử dụng Multer để chặn các yêu cầu đến trên API của chúng tôi và phân tích cú pháp các đầu vào để cung cấp chúng trên đối tượng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]19
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]0
Để xử lý nhiều tệp, hãy sử dụng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]40. Đối với một tệp, hãy sử dụng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]41. Lưu ý rằng đối số
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]31 phụ thuộc vào tên của đầu vào được chỉ định trong
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]53
Multer sẽ thêm các đầu vào văn bản vào
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]5 và thêm các tệp được gửi đến mảng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]11. Để thấy điều này hoạt động trong thiết bị đầu cuối, hãy nhập văn bản và chọn nhiều hình ảnh trên giao diện người dùng, sau đó gửi và kiểm tra kết quả đã ghi trong thiết bị đầu cuối của bạn
Như bạn có thể thấy trong ví dụ bên dưới, tôi đã nhập
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]46 vào đầu vào
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]47 và chọn tệp PDF, tệp SVG và tệp JPEG. Dưới đây là ảnh chụp màn hình kết quả đã ghi
Để tham khảo, nếu bạn muốn tải lên một dịch vụ lưu trữ như Cloudinary, bạn sẽ phải gửi tệp trực tiếp từ thư mục tải lên. Thuộc tính
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]48 hiển thị đường dẫn đến tệp
Các bài viết hay khác từ LogRocket
- Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
- Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các vấn đề trong ứng dụng của bạn
- Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
- Chuyển đổi giữa nhiều phiên bản của Node
- Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
- Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
- So sánh NestJS với. Thể hiện. js
Sự kết luận
Riêng đối với kiểu nhập văn bản, đối tượng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]45 được sử dụng bên trong Express là đủ để phân tích cú pháp các kiểu nhập đó. Chúng cung cấp các đầu vào dưới dạng một cặp giá trị khóa trong đối tượng
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]5. Multer có ích khi biểu mẫu chứa dữ liệu
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]16 bao gồm đầu vào văn bản và tệp mà thư viện
const form = new FormData[] form.append['name', "Dillion"] form.append['image', ]1 không thể xử lý
Với Multer, bạn có thể xử lý một hoặc nhiều tệp ngoài các kiểu nhập văn bản được gửi qua một biểu mẫu. Hãy nhớ rằng bạn chỉ nên sử dụng Multer khi gửi tệp qua các biểu mẫu, vì Multer không thể xử lý bất kỳ biểu mẫu nào không có nhiều phần
Trong bài viết này, chúng ta đã xem sơ lược về việc gửi biểu mẫu, lợi ích của trình phân tích cú pháp nội dung trên máy chủ và vai trò của Multer trong việc xử lý đầu vào biểu mẫu. Chúng tôi cũng đã xây dựng một ứng dụng nhỏ bằng Node. js và Multer để xem quá trình tải tệp lên
Đối với các bước tiếp theo, bạn có thể xem tải lên Cloudinary từ máy chủ của mình bằng Tham chiếu API tải lên. Tôi hy vọng bạn thích bài viết này. Mã hóa vui vẻ
Chỉ dành cho 200
Triển khai trang web hoặc ứng dụng web dựa trên Node là phần dễ dàng. Đảm bảo phiên bản Node của bạn tiếp tục cung cấp tài nguyên cho ứng dụng của bạn là lúc mọi thứ trở nên khó khăn hơn. Nếu bạn quan tâm đến việc đảm bảo các yêu cầu đối với dịch vụ phụ trợ hoặc bên thứ ba thành công, hãy thử LogRocket. LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ diễn ra trong khi người dùng tương tác với ứng dụng của bạn theo đúng nghĩa đen. Thay vì đoán xem tại sao lại xảy ra sự cố, bạn có thể tổng hợp và báo cáo về các yêu cầu mạng có vấn đề để nhanh chóng hiểu nguyên nhân gốc rễ