1
00:00:00,000 --> 00:00:04,223
[MUSIC]

2
00:00:04,223 --> 00:00:09,176
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ủ.

3
00:00:09,176 --> 00:00:13,642
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

4
00:00:13,642 --> 00:00:18,600
ở đó 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ủ.

5
00:00:18,600 --> 00:00:19,545
Ví dụ,

6
00:00:19,545 --> 00:00:23,890
giả sử bạn đang tải thông tin về một món ăn lên phía máy chủ.

7
00:00:23,890 --> 00:00:28,300
Sau đó, bạn cũng sẽ muốn tải lên hình ảnh tương ứng của món ăn

8
00:00:28,300 --> 00:00:29,510
lên phía máy chủ.

9
00:00:29,510 --> 00:00:34,915
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ủ,

10
00:00:34,915 --> 00:00:36,770
có được một URL cho

11
00:00:36,770 --> 00:00:41,170
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à

12
00:00:41,170 --> 00:00:47,380
sau đó sử dụng hình ảnh đó trong tài liệu JSON mô tả chi tiết món ăn.

13
00:00:47,380 --> 00:00:53,050
Vì vậy, sau đó, khi khách hàng truy xuất tài liệu JSON mô tả

14
00:00:53,050 --> 00:00:59,790
món ăn để hiển thị giao diện người dùng, sau đó, từ trong tài liệu JSON, họ sẽ

15
00:00:59,790 --> 00:01:04,310
có thể có được URL của hình ảnh món ăn đã được tải lên phía máy chủ.

16
00:01:04,310 --> 00:01:07,510
Và sau đó sử dụng nó trong việc xây dựng giao diện người dùng.

17
00:01:07,510 --> 00:01:12,500
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

18
00:01:12,500 --> 00:01:16,880
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,

19
00:01:16,880 --> 00:01:24,540
mà không là gì ngoài URL cho hình ảnh đó tương ứng với món ăn cụ thể đó.

20
00:01:24,540 --> 00:01:32,300
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.

21
00:01:32,300 --> 00:01:37,210
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.

22
00:01:37,210 --> 00:01:39,802
Làm thế nào nó được hỗ trợ trong một máy chủ?

23
00:01:39,802 --> 00:01:43,940
Và sau đó làm thế nào chúng ta có thể tận dụng một mô-đun nút

24
00:01:43,940 --> 00:01:48,590
cho phép chúng ta để hỗ trợ tải lên các tập tin.

25
00:01:50,260 --> 00:01:53,630
Tải lên tệp thường được hỗ trợ thông qua một đầu vào biểu mẫu.

26
00:01:53,630 --> 00:01:58,530
Vì vậy, trong một đầu vào, nếu bạn chỉ định loại như là tập tin và

27
00:01:58,530 --> 00:02:03,800
tên là tên của trường ở đó,

28
00:02:03,800 --> 00:02:09,210
sau đó bạn sẽ có thể cung cấp các tập tin sẽ được tải lên

29
00:02:09,210 --> 00:02:14,400
khi bạn nhấp vào nút gửi cho biểu mẫu cụ thể này ở đây.

30
00:02:14,400 --> 00:02:20,234
Bây giờ, khi các thông tin tập tin được tải lên phía máy chủ,

31
00:02:20,234 --> 00:02:24,714
các hình thức dữ liệu chính nó thường được mã hóa như một trong hai

32
00:02:24,714 --> 00:02:31,200
ứng dụng/x-www-form-urlencoded hoặc multipart/form-data.

33
00:02:31,200 --> 00:02:35,900
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

34
00:02:35,900 --> 00:02:40,450
hành động được đặt thành /imageUpload tại REST API nghiêng,

35
00:02:40,450 --> 00:02:48,760
mà sẽ đóng vai trò như là điểm cuối mà bạn làm bài đăng của hình ảnh.

36
00:02:48,760 --> 00:02:53,870
Vì vậy, phương pháp tương ứng sẽ được đăng, và loại mã hóa,

37
00:02:53,870 --> 00:02:58,140
bạn sẽ thiết lập nó để multipart/form-data trong biểu mẫu của bạn.

38
00:02:58,140 --> 00:03:02,797
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,

39
00:03:02,797 --> 00:03:05,920
và sau đó được tải lên phía máy chủ.

40
00:03:05,920 --> 00:03:11,228
Tải lên tệp hiệu quả hơn với dữ liệu đa phần/hình thức.

41
00:03:11,228 --> 00:03:16,130
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.

42
00:03:17,560 --> 00:03:22,945
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

43
00:03:22,945 --> 00:03:28,843
lên biểu mẫu và ứng dụng ứng dụng/x-www-form-urlencoded hoặc

44
00:03:28,843 --> 00:03:33,848
multipart/form-data, sau đó bạn có thể đọc HTML5

45
00:03:33,848 --> 00:03:37,410
(W3C Khuyến nghị) nơi các chi tiết được đưa ra, và

46
00:03:37,410 --> 00:03:42,270
cũng là yêu cầu IETF tương ứng cho nhận xét tài liệu.

47
00:03:42,270 --> 00:03:47,190
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

48
00:03:47,190 --> 00:03:54,070
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ợ.

49
00:03:55,090 --> 00:04:00,110
Từ quan điểm của chúng tôi, khi chúng tôi sử dụng multipart/form-data,

50
00:04:00,110 --> 00:04:04,850
khi điều này được đưa vào một

51
00:04:04,850 --> 00:04:10,040
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,

52
00:04:10,040 --> 00:04:15,320
bạn sẽ có một kiểu nội dung được thiết lập để multipart/form-data.

53
00:04:15,320 --> 00:04:19,410
Và sau đó cũng là một giá trị ranh giới được thiết lập như thế.

54
00:04:19,410 --> 00:04:23,305
Ranh giới tách nhiều phần của nội dung yêu cầu.

55
00:04:23,305 --> 00:04:28,215
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

56
00:04:28,215 --> 00:04:29,475
thành nhiều phần.

57
00:04:29,475 --> 00:04:33,375
Và mỗi phần sẽ được phân định từ phần trước

58
00:04:33,375 --> 00:04:36,582
bằng cách sử dụng ranh giới này ở đây.

59
00:04:36,582 --> 00:04:40,912
Bây giờ, để minh họa thêm cho bạn các chi tiết, tôi đã thiết lập máy

60
00:04:40,912 --> 00:04:45,292
chủ để in ra thông tin này từ thông điệp yêu cầu đến.

61
00:04:45,292 --> 00:04:49,202
Để chúng ta có thể kiểm tra chi tiết hơn một chút.

62
00:04:49,202 --> 00:04:52,092
Hãy nhìn vào các chi tiết cho

63
00:04:52,092 --> 00:04:57,850
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ủ,

64
00:04:57,850 --> 00:05:03,250
bạn có thể nhận thấy rằng ở đây, tôi đã in các tiêu đề yêu cầu ở đây.

65
00:05:03,250 --> 00:05:08,530
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

66
00:05:08,530 --> 00:05:13,500
ở đây, được gọi là kiểu nội dung, được đặt thành multipart/form-data.

67
00:05:13,500 --> 00:05:17,720
Và sau đó lưu ý đặc biệt ranh giới được xác định ở đây

68
00:05:17,720 --> 00:05:20,660
với con số dài này ở đây.

69
00:05:20,660 --> 00:05:23,500
Vì vậy, đó là tiêu đề yêu cầu cho

70
00:05:23,500 --> 00:05:28,400
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.

71
00:05:28,400 --> 00:05:32,750
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

72
00:05:32,750 --> 00:05:37,710
trong bài tập sau bài giảng này để tải lên tệp.

73
00:05:37,710 --> 00:05:42,110
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

74
00:05:42,110 --> 00:05:46,920
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.

75
00:05:46,920 --> 00:05:49,010
Và trong cơ thể yêu cầu,

76
00:05:49,010 --> 00:05:54,460
bạn sẽ nhận thấy rằng nó in ra dòng cụ thể này ở đây.

77
00:05:54,460 --> 00:05:58,040
Và điều này tương ứng với ranh giới được chỉ định ở đây.

78
00:05:58,040 --> 00:06:04,717
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

79
00:06:04,717 --> 00:06:10,070
cơ thể đa phần là một phần của thông điệp yêu cầu này.

80
00:06:10,070 --> 00:06:13,330
Vì vậy, trong cơ thể yêu cầu, bạn sẽ thấy điều này được định nghĩa ở đây.

81
00:06:13,330 --> 00:06:18,810
Ngoài ra, bạn cũng sẽ chỉ định cùng một Content-Disposition như form-data,

82
00:06:18,810 --> 00:06:22,361
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à

83
00:06:22,361 --> 00:06:24,920
tên tương ứng a s ImageFile.

84
00:06:26,120 --> 00:06:30,569
Và tên tập tin chính nó từ phía khách hàng đã được tải lên,

85
00:06:30,569 --> 00:06:33,220
tên tập tin chính nó được đưa ra ở đây.

86
00:06:33,220 --> 00:06:38,180
Và sau đó xuống dưới nó nói Content-Type: hình ảnh/png.

87
00:06:38,180 --> 00:06:41,620
Vì vậy, tôi đang tải lên tập tin hình ảnh PNG này ở đây.

88
00:06:41,620 --> 00:06:44,220
Vì vậy, đây là những chi tiết được mô tả ở đây.

89
00:06:44,220 --> 00:06:48,870
Và khi bạn cuộn xuống nội dung yêu cầu,

90
00:06:48,870 --> 00:06:53,480
bạn sẽ thấy chi tiết về nội dung được bao gồm trong nội dung yêu cầu.

91
00:06:53,480 --> 00:07:00,680
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.

92
00:07:00,680 --> 00:07:03,970
Vì vậy, nếu bạn mở tập tin PNG, đây là những gì bạn sẽ thấy ở đây.

93
00:07:03,970 --> 00:07:07,200
Vì vậy, điều này chứa một loạt các ký tự ở đây,

94
00:07:07,200 --> 00:07:09,960
mà rõ ràng trên màn hình không thể được in.

95
00:07:09,960 --> 00:07:14,980
Vì vậy, khi bạn cuộn xuống, bạn sẽ toàn bộ tập hợp thông tin,

96
00:07:16,960 --> 00:07:21,730
mà thực sự là những gì được chứa trong cơ thể yêu cầu của

97
00:07:21,730 --> 00:07:26,310
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ủ.

98
00:07:26,310 --> 00:07:30,720
Vì vậy, bạn thấy rằng cơ thể đó thực sự chứa phiên bản mã hóa

99
00:07:30,720 --> 00:07:33,640
của hình ảnh ở đó.

100
00:07:33,640 --> 00:07:39,650
Và đây là kết thúc của ranh giới cho cơ thể yêu cầu đó.

101
00:07:39,650 --> 00:07:44,960
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.

102
00:07:44,960 --> 00:07:48,230
Bạn cũng có thể tải lên nhiều tệp nếu bạn vẫn muốn.

103
00:07:48,230 --> 00:07:53,140
Nhưng sau đó, bạn cần phải cấu hình mô-đun npm một cách thích hợp để

104
00:07:53,140 --> 00:07:55,490
chấp nhận nhiều tập tin.

105
00:07:55,490 --> 00:08:02,780
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

106
00:08:02,780 --> 00:08:08,045
của hình ảnh, từ đó máy chủ của bạn sẽ trích xuất hình ảnh,

107
00:08:08,045 --> 00:08:12,515
và sau đó lưu nó vào tệp có cùng tên tệp ở phía máy chủ.

108
00:08:12,515 --> 00:08:17,245
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ủ,

109
00:08:17,245 --> 00:08:21,095
để làm trong bài tập sau bài giảng này.

110
00:08:21,095 --> 00:08:23,990
Vì vậy, tôi nghĩ rằng nó sẽ là một

111
00:08:23,990 --> 00:08:28,500
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.

112
00:08:28,500 --> 00:08:33,090
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.

113
00:08:33,090 --> 00:08:35,230
Và làm thế nào, trong cơ thể yêu cầu chính nó,

114
00:08:35,230 --> 00:08:41,163
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.

115
00:08:41,163 --> 00:08:43,895
Vì vậy, phía máy chủ, khi nó xử lý,

116
00:08:43,895 --> 00:08:49,645
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,

117
00:08:49,645 --> 00:08:52,660
và sau đó lưu tập tin hình ảnh ở phía máy chủ.

118
00:08:53,890 --> 00:08:59,030
Vì vậy, cũng giống như tôi đã minh họa trong thiết bị đầu cuối

119
00:08:59,030 --> 00:09:03,320
có ranh giới tách phần yêu cầu multipass.

120
00:09:03,320 --> 00:09:06,538
Và vì vậy bạn đã thấy ranh giới được chỉ định ở đó.

121
00:09:06,538 --> 00:09:12,843
Để 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,

122
00:09:12,843 --> 00:09:17,768
chúng ta sẽ sử dụng một mô-đun NPR hỗ trợ xử lý

123
00:09:17,768 --> 00:09:22,610
dữ liệu biểu mẫu đa phần được bao gồm bên trong cơ thể yêu cầu.

124
00:09:22,610 --> 00:09:25,290
Nó sẽ tự động trích xuất tất cả mọi thứ cho bạn, và

125
00:09:25,290 --> 00:09:31,218
sau đó tải nó lên hai đối tượng trên đối tượng yêu cầu ở phía máy chủ.

126
00:09:31,218 --> 00:09:36,840
Vì vậy, mô-đun npm này được gọi là Multer, mà khi được cài đặt

127
00:09:36,840 --> 00:09:41,280
trên ứng dụng phía máy chủ của

128
00:09:41,280 --> 00:09:44,910
bạn và cấu hình máy chủ express của bạn để sử dụng Multer.

129
00:09:44,910 --> 00:09:49,370
Sau đó, bạn sẽ có thể xử lý thông điệp yêu cầu đến có

130
00:09:49,370 --> 00:09:52,560
chứa dữ liệu đa phần/biểu mẫu này trong thông điệp yêu cầu.

131
00:09:52,560 --> 00:09:56,190
Vì vậy, Multer là mô-đun nút nơi mà sẽ

132
00:09:56,190 --> 00:09:59,930
giúp máy chủ xử lý đa phần/hình thức dữ liệu.

133
00:09:59,930 --> 00:10:04,330
Điều này được viết trên đầu trang của một module npm gọi là busboy.

134
00:10:04,330 --> 00:10:11,480
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.

135
00:10:11,480 --> 00:10:16,350
Và đặc biệt, Multer mang đến busboy để cho phép bạn

136
00:10:16,350 --> 00:10:20,330
xử lý dữ liệu đa phần /form ở phía máy chủ của bạn.

137
00:10:20,330 --> 00:10:24,040
Bây giờ khi nó phân tích thông tin này, Multer sẽ

138
00:10:24,040 --> 00:10:29,280
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.

139
00:10:29,280 --> 00:10:34,070
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.

140
00:10:34,070 --> 00:10:38,861
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.

141
00:10:38,861 --> 00:10:44,042
Sau đó, nếu bạn thiết lập Multer để chấp nhận nhiều tệp tải lên,

142
00:10:44,042 --> 00:10:47,590
sau đó bạn có thể thiết lập đối tượng req.files. Đối

143
00:10:47,590 --> 00:10:51,480
tượng file sẽ là một mảng chứa tất cả các thông tin cho

144
00:10:51,480 --> 00:10:54,878
mỗi tập tin cụ thể được tải lên trên phía máy chủ.

145
00:10:54,878 --> 00:11:00,565
Đối tượng tệp chính nó chứa thông tin tóm tắt

146
00:11:00,565 --> 00:11:05,714
cách tệp được lưu ở phía máy chủ bởi Multer.

147
00:11:05,714 --> 00:11:09,219
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

148
00:11:09,219 --> 00:11:14,340
hãy chuyển sang bài tập mà chúng ta sẽ thực sự cấu hình mô-đun Multer.

149
00:11:14,340 --> 00:11:19,113
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

150
00:11:19,113 --> 00:11:20,685
từ phía khách hàng.

151
00:11:20,685 --> 00:11:26,869
[ NHẠC]