[MUSIC]
Tải lên tệp là một tính năng phổ biến được hỗ trợ bởi nhiều máy chủ.
Vì vậy, khi bạn điền vào một biểu mẫu ví dụ, bạn có thể có một trường
ở đó bạn điền vào một tên tập tin và sau đó tải tập tin đó lên phía máy chủ.
Ví dụ,
giả sử bạn đang tải thông tin về một món ăn lên phía máy chủ.
Sau đó, bạn cũng sẽ muốn tải lên hình ảnh tương ứng của món ăn
lên phía máy chủ.
Vì vậy, trong quá trình này, trước tiên bạn sẽ tải lên hình ảnh của món ăn lên phía máy chủ,
có được một URL cho
hình ảnh đó từ phía máy chủ bất cứ nơi nào nó được tải lên và lưu trữ, và
sau đó sử dụng hình ảnh đó trong tài liệu JSON mô tả chi tiết món ăn.
Vì vậy, sau đó, khi khách hàng truy xuất tài liệu JSON mô tả
món ăn để hiển thị giao diện người dùng, sau đó, từ trong tài liệu JSON, họ sẽ
có thể có được URL của hình ảnh món ăn đã được tải lên phía máy chủ.
Và sau đó sử dụng nó trong việc xây dựng giao diện người dùng.
Vì vậy, trong các ví dụ mà chúng tôi đã thấy cho đến nay, khi chúng tôi nhìn vào các chi tiết của
một món ăn, chúng tôi đã thấy rằng có một hình ảnh được lấp đầy trong đó, đó là một chuỗi,
mà không là gì ngoài URL cho hình ảnh đó tương ứng với món ăn cụ thể đó.
Hoặc chương trình khuyến mãi hoặc người đọc như chúng tôi đã xây dựng trong máy chủ REST API của chúng tôi.
Bây giờ trong bài giảng này, chúng ta sẽ tìm hiểu thêm về việc tải lên các tập tin.
Làm thế nào nó được hỗ trợ trong một máy chủ?
Và sau đó làm thế nào chúng ta có thể tận dụng một mô-đun nút
cho phép chúng ta để hỗ trợ tải lên các tập tin.
Tải lên tệp thường được hỗ trợ thông qua một đầu vào biểu mẫu.
Vì vậy, trong một đầu vào, nếu bạn chỉ định loại như là tập tin và
tên là tên của trường ở đó,
sau đó bạn sẽ có thể cung cấp các tập tin sẽ được tải lên
khi bạn nhấp vào nút gửi cho biểu mẫu cụ thể này ở đây.
Bây giờ, khi các thông tin tập tin được tải lên phía máy chủ,
các hình thức dữ liệu chính nó thường được mã hóa như một trong hai
ứng dụng/x-www-form-urlencoded hoặc multipart/form-data.
Vì vậy, sau đó bạn thiết kế biểu mẫu của bạn, ví dụ, bạn sẽ thiết kế biểu mẫu của bạn với
hành động được đặt thành /imageUpload tại REST API nghiêng,
mà sẽ đóng vai trò như là điểm cuối mà bạn làm bài đăng của hình ảnh.
Vì vậy, phương pháp tương ứng sẽ được đăng, và loại mã hóa,
bạn sẽ thiết lập nó để multipart/form-data trong biểu mẫu của bạn.
Vì vậy, điều này có nghĩa là các yếu tố biểu mẫu sẽ được mã hóa thành loại mã hóa,
và sau đó được tải lên phía máy chủ.
Tải lên tệp hiệu quả hơn với dữ liệu đa phần/hình thức.
Và do đó, đó là cách tiếp cận ưa thích mà chúng tôi sử dụng để tải lên các tập tin.
Bây giờ, nếu bạn muốn biết thêm chi tiết về tải lên tệp và tải
lên biểu mẫu và ứng dụng ứng dụng/x-www-form-urlencoded hoặc
multipart/form-data, sau đó bạn có thể đọc HTML5
(W3C Khuyến nghị) nơi các chi tiết được đưa ra, và
cũng là yêu cầu IETF tương ứng cho nhận xét tài liệu.
Tôi có liên kết đến những điều này trong các tài nguyên bổ sung trong trường hợp bạn muốn đọc thêm
về các chi tiết thực tế về cách các loại mã hóa biểu mẫu này được hỗ trợ.
Từ quan điểm của chúng tôi, khi chúng tôi sử dụng multipart/form-data,
khi điều này được đưa vào một
thông điệp yêu cầu HTTP sẽ đến phía máy chủ, sau đó trong tiêu đề của thông điệp yêu cầu,
bạn sẽ có một kiểu nội dung được thiết lập để multipart/form-data.
Và sau đó cũng là một giá trị ranh giới được thiết lập như thế.
Ranh giới tách nhiều phần của nội dung yêu cầu.
Vì vậy, thân yêu cầu của thông điệp yêu cầu gửi đi sẽ được chia
thành nhiều phần.
Và mỗi phần sẽ được phân định từ phần trước
bằng cách sử dụng ranh giới này ở đây.
Bây giờ, để minh họa thêm cho bạn các chi tiết, tôi đã thiết lập máy
chủ để in ra thông tin này từ thông điệp yêu cầu đến.
Để chúng ta có thể kiểm tra chi tiết hơn một chút.
Hãy nhìn vào các chi tiết cho
một thông điệp cụ thể mà tôi đã gửi từ người đưa thư của tôi đến phía máy chủ,
bạn có thể nhận thấy rằng ở đây, tôi đã in các tiêu đề yêu cầu ở đây.
Và đặc biệt, trong tiêu đề yêu cầu, hãy để tôi thu hút sự chú ý của bạn đến tiêu đề này
ở đây, được gọi là kiểu nội dung, được đặt thành multipart/form-data.
Và sau đó lưu ý đặc biệt ranh giới được xác định ở đây
với con số dài này ở đây.
Vì vậy, đó là tiêu đề yêu cầu cho
thông báo yêu cầu đến mà tôi đã đăng bằng cách sử dụng bài phương pháp.
Trong thực tế, đây chính xác là thông điệp yêu cầu mà tôi sẽ sử dụng
trong bài tập sau bài giảng này để tải lên tệp.
Vì vậy, khi chúng tôi tải lên tập tin đó ở đó, được rồi, bạn sẽ nhận thấy rằng
trong cơ thể yêu cầu, vì vậy đây là nơi tôi in ra cơ thể yêu cầu xuống dưới đây.
Và trong cơ thể yêu cầu,
bạn sẽ nhận thấy rằng nó in ra dòng cụ thể này ở đây.
Và điều này tương ứng với ranh giới được chỉ định ở đây.
Vì vậy, ranh giới này về cơ bản xác định sự tách biệt giữa các phần khác nhau của
cơ thể đa phần là một phần của thông điệp yêu cầu này.
Vì vậy, trong cơ thể yêu cầu, bạn sẽ thấy điều này được định nghĩa ở đây.
Ngoài ra, bạn cũng sẽ chỉ định cùng một Content-Disposition như form-data,
do đó, có nghĩa là họ sẽ giải thích điều này như là dữ liệu biểu mẫu và
tên tương ứng a s ImageFile.
Và tên tập tin chính nó từ phía khách hàng đã được tải lên,
tên tập tin chính nó được đưa ra ở đây.
Và sau đó xuống dưới nó nói Content-Type: hình ảnh/png.
Vì vậy, tôi đang tải lên tập tin hình ảnh PNG này ở đây.
Vì vậy, đây là những chi tiết được mô tả ở đây.
Và khi bạn cuộn xuống nội dung yêu cầu,
bạn sẽ thấy chi tiết về nội dung được bao gồm trong nội dung yêu cầu.
Vì vậy, điều này bên trong tập tin PNG ở đây, bạn sẽ thấy thông tin này trong tập tin PNG.
Vì vậy, nếu bạn mở tập tin PNG, đây là những gì bạn sẽ thấy ở đây.
Vì vậy, điều này chứa một loạt các ký tự ở đây,
mà rõ ràng trên màn hình không thể được in.
Vì vậy, khi bạn cuộn xuống, bạn sẽ toàn bộ tập hợp thông tin,
mà thực sự là những gì được chứa trong cơ thể yêu cầu của
thông điệp yêu cầu đang tải lên tệp cụ thể này lên phía máy chủ.
Vì vậy, bạn thấy rằng cơ thể đó thực sự chứa phiên bản mã hóa
của hình ảnh ở đó.
Và đây là kết thúc của ranh giới cho cơ thể yêu cầu đó.
Vì vậy, trong thông điệp yêu cầu của chúng tôi, chúng tôi chỉ có một tập tin bao gồm trong đây.
Bạn cũng có thể tải lên nhiều tệp nếu bạn vẫn muốn.
Nhưng sau đó, bạn cần phải cấu hình mô-đun npm một cách thích hợp để
chấp nhận nhiều tập tin.
Vì vậy, đây là cách cơ thể yêu cầu của bạn chứa phiên bản mã hóa
của hình ảnh, từ đó máy chủ của bạn sẽ trích xuất hình ảnh,
và sau đó lưu nó vào tệp có cùng tên tệp ở phía máy chủ.
Vì vậy, đây là cách chúng tôi sẽ cấu hình ứng dụng của chúng tôi, ứng dụng phía máy chủ,
để làm trong bài tập sau bài giảng này.
Vì vậy, tôi nghĩ rằng nó sẽ là một
bước thú vị để minh họa cho bạn chính xác những gì máy chủ của tôi đang nhận được.
Và vì vậy điều này sẽ cho biết lý do tại sao chúng ta đang chỉ định ranh giới này ở đây.
Và làm thế nào, trong cơ thể yêu cầu chính nó,
chúng ta đang sử dụng ranh giới để mô tả các phần khác nhau của cơ thể yêu cầu.
Vì vậy, phía máy chủ, khi nó xử lý,
sẽ có thể trích xuất dữ liệu hình ảnh từ cơ thể yêu cầu một cách thích hợp,
và sau đó lưu tập tin hình ảnh ở phía máy chủ.
Vì vậy, cũng giống như tôi đã minh họa trong thiết bị đầu cuối
có ranh giới tách phần yêu cầu multipass.
Và vì vậy bạn đã thấy ranh giới được chỉ định ở đó.
Để làm việc với dữ liệu biểu mẫu đa phần chứa trong cơ thể yêu cầu,
chúng ta sẽ sử dụng một mô-đun NPR hỗ trợ xử lý
dữ liệu biểu mẫu đa phần được bao gồm bên trong cơ thể yêu cầu.
Nó sẽ tự động trích xuất tất cả mọi thứ cho bạn, và
sau đó tải nó lên hai đối tượng trên đối tượng yêu cầu ở phía máy chủ.
Vì vậy, mô-đun npm này được gọi là Multer, mà khi được cài đặt
trên ứng dụng phía máy chủ của
bạn và cấu hình máy chủ express của bạn để sử dụng Multer.
Sau đó, bạn sẽ có thể xử lý thông điệp yêu cầu đến có
chứa dữ liệu đa phần/biểu mẫu này trong thông điệp yêu cầu.
Vì vậy, Multer là mô-đun nút nơi mà sẽ
giúp máy chủ xử lý đa phần/hình thức dữ liệu.
Điều này được viết trên đầu trang của một module npm gọi là busboy.
Busboy là một mô-đun xử lý dữ liệu dạng HTML đến, dữ liệu dạng HTML tổng quát.
Và đặc biệt, Multer mang đến busboy để cho phép bạn
xử lý dữ liệu đa phần /form ở phía máy chủ của bạn.
Bây giờ khi nó phân tích thông tin này, Multer sẽ
tải lên dữ liệu biểu mẫu đến và nó thêm một đối tượng cơ thể vào req.
Vì vậy, bạn sẽ có một đối tượng req.body và cũng là một đối tượng req.file.
Nếu bạn tải lên một tập tin duy nhất, sau đó nó sẽ tiếp tục đối tượng req.file.
Sau đó, nếu bạn thiết lập Multer để chấp nhận nhiều tệp tải lên,
sau đó bạn có thể thiết lập đối tượng req.files. Đối
tượng file sẽ là một mảng chứa tất cả các thông tin cho
mỗi tập tin cụ thể được tải lên trên phía máy chủ.
Đối tượng tệp chính nó chứa thông tin tóm tắt
cách tệp được lưu ở phía máy chủ bởi Multer.
Với sự hiểu biết nhanh chóng về cách tải lên tệp hoạt động, chúng ta
hãy chuyển sang bài tập mà chúng ta sẽ thực sự cấu hình mô-đun Multer.
Và sau đó sử dụng nó trong ứng dụng thể hiện của chúng tôi để xử lý các tệp tải lên
từ phía khách hàng.
[ NHẠC]