1
00:00:03,680 --> 00:00:05,985
Trong bài học trước,

2
00:00:05,985 --> 00:00:08,880
chúng ta đã tìm hiểu về cách thức

3
00:00:08,880 --> 00:00:12,445
hỗ trợ tải lên tệp thông qua phương pháp tiếp cận dữ liệu đa nền tảng.

4
00:00:12,445 --> 00:00:16,320
Trong bài tập này, chúng tôi sẽ sử dụng mô-đun Multer,

5
00:00:16,320 --> 00:00:21,885
mà chúng tôi đã đề cập trong bài giảng để cho phép máy chủ thể hiện của chúng tôi

6
00:00:21,885 --> 00:00:27,820
để hỗ trợ tải lên các tập tin hình ảnh vào trang web máy chủ của chúng tôi.

7
00:00:27,820 --> 00:00:33,920
Họ sẽ lưu trữ các tập tin hình ảnh này vào thư mục công công/hình ảnh.

8
00:00:33,920 --> 00:00:40,370
Hình ảnh này sẽ hữu ích trong ứng dụng của chúng tôi khi chúng tôi cung cấp

9
00:00:40,370 --> 00:00:46,690
hình ảnh cho các món ăn khác nhau hoặc các radar hoặc các chương trình khuyến mãi,

10
00:00:46,690 --> 00:00:51,490
mà chúng tôi đã xây dựng trong máy chủ REST API của chúng tôi.

11
00:00:51,490 --> 00:00:54,495
Để bắt đầu với bài tập này,

12
00:00:54,495 --> 00:00:55,770
bước đầu tiên của tất nhiên,

13
00:00:55,770 --> 00:01:01,445
là cài đặt mô-đun Multer vì vậy tại dấu nhắc loại npm cài đặt

14
00:01:01,445 --> 00:01:10,145
multer trừ lưu và tại thời điểm này tôi đang sử dụng multer 1.3.1 trong khóa học này.

15
00:01:10,145 --> 00:01:12,785
Vì vậy, một khi chúng tôi đã cài đặt mô-đun multer, chúng

16
00:01:12,785 --> 00:01:21,695
ta hãy đi đến dự án của chúng tôi và sau đó thực hiện một tuyến đường mới cho phép chúng tôi tải lên các tập tin.

17
00:01:21,695 --> 00:01:25,920
Đi vào dự án trong thư mục route,

18
00:01:25,920 --> 00:01:33,210
chúng ta hãy thêm một tệp mới có tên upload router.js.

19
00:01:33,210 --> 00:01:37,260
Bộ định tuyến này, bộ định tuyến nhanh mà chúng tôi sẽ thực hiện ở đây,

20
00:01:37,260 --> 00:01:43,380
là bộ định tuyến sẽ hỗ trợ việc tải lên các tập tin.

21
00:01:43,380 --> 00:01:46,250
Vì vậy, trong bộ định tuyến tải lên cho phép tôi chỉ cần đi đến

22
00:01:46,250 --> 00:01:50,120
bộ định tuyến đĩa và sao chép những điều đầu tiên từ bộ định tuyến đĩa

23
00:01:50,120 --> 00:01:52,550
vì chúng tôi đang khá nhiều sẽ thiết lập

24
00:01:52,550 --> 00:01:57,440
cấu trúc tương tự trong ứng dụng của chúng tôi hoặc bộ định tuyến tải lên.

25
00:01:57,440 --> 00:02:00,720
Vì vậy, để tôi sao chép phần đó và sau đó chúng tôi sẽ chỉnh sửa nó.

26
00:02:00,720 --> 00:02:02,800
Vì vậy, trong bộ định tuyến tải lên,

27
00:02:02,800 --> 00:02:09,850
tôi không cần mongoose vì vậy tôi sẽ loại bỏ mongoose và tôi cũng không cần các món ăn.

28
00:02:09,850 --> 00:02:12,755
Vì vậy, hai người sẽ được gỡ bỏ và sau đó

29
00:02:12,755 --> 00:02:15,935
chúng ta cần phải thể hiện phân tích cú pháp cơ thể và xác thực.

30
00:02:15,935 --> 00:02:25,585
Bây giờ, tôi sẽ yêu cầu mô-đun multer ở đây.

31
00:02:25,585 --> 00:02:29,280
Một khi chúng tôi bao gồm các mô-đun multer,

32
00:02:29,280 --> 00:02:35,585
bây giờ router này tôi sẽ gọi đây là bộ định tuyến tải lên.

33
00:02:35,585 --> 00:02:42,020
Vì vậy, sẽ nói bộ định tuyến tải lên sử dụng bộ phân tích cơ thể và

34
00:02:42,020 --> 00:02:48,040
sau đó điều này nhưng bộ định tuyến tải lên và một lần nữa,

35
00:02:48,040 --> 00:02:58,110
hãy nhớ để nói mô-đun xuất khẩu, bộ định tuyến tải lên ở đây.

36
00:02:58,110 --> 00:03:00,570
Vì vậy, đối với tuyến đường bộ định tuyến tải lên,

37
00:03:00,570 --> 00:03:03,025
chúng ta cần thêm các phương pháp khác nhau.

38
00:03:03,025 --> 00:03:07,130
Tôi sẽ làm điều đó một chút sau đó nhưng trước đó chúng ta hãy thiết lập

39
00:03:07,130 --> 00:03:11,765
multer để cho phép chúng tôi tải lên các tập tin.

40
00:03:11,765 --> 00:03:19,545
Bây giờ, theo mặc định, multer có thể được thiết lập bằng cách sử dụng multer trong ứng dụng của chúng

41
00:03:19,545 --> 00:03:24,360
tôi, nhưng tôi sẽ làm một số cấu hình của multer trong

42
00:03:24,360 --> 00:03:28,100
bài tập này

43
00:03:28,100 --> 00:03:32,615
để chúng tôi sẽ tùy chỉnh cách multer xử lý việc tải lên các tập tin.

44
00:03:32,615 --> 00:03:35,150
Vì vậy, để sử dụng multer,

45
00:03:35,150 --> 00:03:43,455
một trong những tùy chọn mà multer mất là cho lưu trữ.

46
00:03:43,455 --> 00:03:49,295
Vì vậy, multer cung cấp chức năng lưu trữ đĩa này

47
00:03:49,295 --> 00:03:56,480
cho phép chúng tôi xác định công cụ lưu trữ và ở đây chúng tôi có thể cấu hình một vài điều.

48
00:03:56,480 --> 00:04:00,409
Bây giờ, nếu nó chỉ là một vấn đề của cấu hình đích,

49
00:04:00,409 --> 00:04:03,830
bạn chỉ có thể nói dấu hai chấm dest,

50
00:04:03,830 --> 00:04:08,810
và sau đó chỉ định thư mục đích trong đó các tập tin tải lên sẽ được lưu trữ.

51
00:04:08,810 --> 00:04:15,450
Nhưng ở đây tôi sẽ làm một số cấu hình thêm cho mô-đun multer ở đây.

52
00:04:15,450 --> 00:04:19,715
Vì vậy, đây là nơi tôi sẽ sử dụng hỗ trợ lưu trữ đĩa multer.

53
00:04:19,715 --> 00:04:22,025
Bên trong bộ nhớ đĩa,

54
00:04:22,025 --> 00:04:27,080
tôi có thể xác định một vài tùy chọn ở đây.

55
00:04:27,080 --> 00:04:32,315
Các tùy chọn mà tôi sẽ xác định sẽ là

56
00:04:32,315 --> 00:04:40,535
đích và thứ hai là tên tập tin.

57
00:04:40,535 --> 00:04:45,725
Vì vậy, hai cấu hình mà tôi sẽ cung cấp cho bộ nhớ đĩa.

58
00:04:45,725 --> 00:04:48,860
Điểm đến như bạn mong đợi,

59
00:04:48,860 --> 00:04:56,405
cho phép tôi cấu hình điểm đến và điều này mất

60
00:04:56,405 --> 00:05:03,450
như một cấu hình ở đây một chức năng ở đây.

61
00:05:03,450 --> 00:05:06,980
Vì vậy, đích được cấu hình như một chức năng ở đây.

62
00:05:06,980 --> 00:05:14,060
Chức năng này sẽ nhận được yêu cầu và cũng là một đối tượng được gọi là tập

63
00:05:14,060 --> 00:05:16,790
tin, chứa thông tin về tập tin

64
00:05:16,790 --> 00:05:21,930
đã được xử lý bởi multer và cũng là một chức năng gọi lại.

65
00:05:21,930 --> 00:05:24,045
Vì vậy, cb là hàm callback.

66
00:05:24,045 --> 00:05:27,915
Vì vậy, ở đây cho đích,

67
00:05:27,915 --> 00:05:32,865
tôi sẽ nói cb null,

68
00:05:32,865 --> 00:05:37,054
tham số thứ hai là thư mục đích,

69
00:05:37,054 --> 00:05:41,330
có thể được thể hiện dưới dạng một chuỗi nơi các tập tin sẽ được lưu trữ.

70
00:05:41,330 --> 00:05:51,025
Vì vậy, ở đây, tôi sẽ cung cấp điểm đến như là hình ảnh gạch chéo công cộng.

71
00:05:51,025 --> 00:05:54,980
Bởi vì trong bài tập này, tôi sẽ hỗ trợ tải lên hình ảnh.

72
00:05:54,980 --> 00:05:59,865
Vì vậy, đó là phần mà tôi sẽ chỉ định ở đây, vì vậy tải lên hình ảnh.

73
00:05:59,865 --> 00:06:03,800
Vì vậy, hàm gọi lại như bạn thấy có hai tham số.

74
00:06:03,800 --> 00:06:04,820
Đầu tiên là, tất nhiên,

75
00:06:04,820 --> 00:06:07,460
lỗi mà trong trường hợp này tôi sẽ đặt nó thành

76
00:06:07,460 --> 00:06:11,335
null và thứ hai là thư mục đích,

77
00:06:11,335 --> 00:06:14,110
nơi hình ảnh của tôi sẽ được lưu trữ.

78
00:06:14,110 --> 00:06:19,010
Vì vậy, tôi có thể cấu hình điều đó bằng cách nói hình ảnh gạch chéo công cộng.

79
00:06:19,010 --> 00:06:20,995
Vì vậy, trong thư mục hình ảnh,

80
00:06:20,995 --> 00:06:24,300
các tập tin mà tôi tải lên sẽ lưu trữ.

81
00:06:24,300 --> 00:06:26,370
Đối với tên tập tin cũng,

82
00:06:26,370 --> 00:06:31,320
nó nhận được ba tham số,

83
00:06:31,320 --> 00:06:35,985
yêu cầu tin nhắn, tập tin và chức năng gọi lại.

84
00:06:35,985 --> 00:06:39,345
Từ việc cấu hình cách gọi hàm gọi lại,

85
00:06:39,345 --> 00:06:42,140
chúng ta có thể chỉ định thông tin về tên tệp.

86
00:06:42,140 --> 00:06:47,205
Vì vậy, đối với chức năng callback tôi sẽ nói cb null và không có lỗi ở đây.

87
00:06:47,205 --> 00:06:51,860
Sau đó, thứ hai nhấn mạnh vào tên tập tin,

88
00:06:51,860 --> 00:06:56,430
đó là sẽ được sử dụng cho các tập tin cụ thể vừa được tải lên,

89
00:06:56,430 --> 00:06:57,975
làm thế nào nó sẽ được lưu trữ.

90
00:06:57,975 --> 00:07:01,835
Vì vậy, đối tượng tập tin này mà tôi thu được ở đây,

91
00:07:01,835 --> 00:07:08,595
hỗ trợ một tập hợp các thuộc tính trên đó.

92
00:07:08,595 --> 00:07:11,985
Một trong những thuộc tính được gọi là, tên gốc.

93
00:07:11,985 --> 00:07:14,585
Vì vậy, tên gốc về cơ bản,

94
00:07:14,585 --> 00:07:19,475
cung cấp cho chúng ta tên gốc của tập tin từ phía khách hàng đã được tải lên.

95
00:07:19,475 --> 00:07:23,410
Tôi nhấn mạnh rằng, khi tệp được lưu ở phía máy chủ,

96
00:07:23,410 --> 00:07:26,380
tệp sẽ được cung cấp chính xác

97
00:07:26,380 --> 00:07:29,710
cùng tên với tên gốc của tệp đã được tải lên.

98
00:07:29,710 --> 00:07:32,605
Vì vậy mà tôi có thể biết rằng tôi đang tải lên

99
00:07:32,605 --> 00:07:35,140
chính xác cùng một tập tin và ở phía máy chủ khi

100
00:07:35,140 --> 00:07:38,200
tập tin được tải lên sẽ được lưu trữ với cùng tên.

101
00:07:38,200 --> 00:07:42,000
Bây giờ, nếu bạn không cấu hình này sau đó,

102
00:07:42,000 --> 00:07:45,100
multer theo mặc định sẽ cung cấp cho một số chuỗi ngẫu nhiên

103
00:07:45,100 --> 00:07:48,130
như tên của tập tin không có phần mở rộng.

104
00:07:48,130 --> 00:07:51,590
Vì vậy, đó có thể không phải là một cái gì đó mà bạn sẽ hài lòng khi

105
00:07:51,590 --> 00:07:55,290
sử dụng trong bài tập đặc biệt này.

106
00:07:55,290 --> 00:07:58,940
Vì vậy, đó là lý do tại sao tôi rõ ràng cấu hình nói rằng,

107
00:07:58,940 --> 00:08:04,805
các tập tin nên được lưu trữ với tên ban đầu của tập tin đã được tải lên.

108
00:08:04,805 --> 00:08:08,300
Chúng ta sẽ một lần nữa gặp phải đối tượng tập tin này

109
00:08:08,300 --> 00:08:11,630
một chút chi tiết hơn và xem cách chúng

110
00:08:11,630 --> 00:08:15,245
ta có thể sử dụng thông tin từ đối tượng tập tin một chút sau đó.

111
00:08:15,245 --> 00:08:22,790
Ngoài ra, tôi cũng có thể chỉ định một bộ lọc tập tin ở đây cho cấu hình multers.

112
00:08:22,790 --> 00:08:28,145
Bộ lọc tệp sẽ cho phép tôi xác định loại tệp nào

113
00:08:28,145 --> 00:08:33,410
tôi sẵn sàng tải lên hoặc tôi sẵn sàng chấp nhận tải lên.

114
00:08:33,410 --> 00:08:37,310
Vì vậy, để làm điều này, tôi sẽ thiết lập một chức năng khác gọi là

115
00:08:37,310 --> 00:08:42,480
bộ lọc tập tin hình ảnh const

116
00:08:43,360 --> 00:08:48,755
và điều này tôi sẽ xác định chức năng trong một phút.

117
00:08:48,755 --> 00:08:51,530
Bây giờ, đối với điều này, tôi cũng có thể lưu này như là

118
00:08:51,530 --> 00:08:55,580
lưu trữ const bởi vì chúng tôi đã sử dụng const cho tất cả mọi thứ

119
00:08:55,580 --> 00:08:57,650
, vì vậy, tôi sẽ chỉ nói lưu trữ const.

120
00:08:57,650 --> 00:08:59,480
Đối với bộ lọc tập tin hình ảnh,

121
00:08:59,480 --> 00:09:01,490
tôi sẽ nói bộ lọc tập tin hình ảnh const.

122
00:09:01,490 --> 00:09:07,725
Một lần nữa, nó nhận được ba tham số yêu cầu

123
00:09:07,725 --> 00:09:11,780
, đối tượng, đối tượng tập tin có chứa thông tin về

124
00:09:11,780 --> 00:09:15,660
các tập tin đã được tải lên và chức năng gọi lại ở đây.

125
00:09:15,660 --> 00:09:17,260
Thông qua chức năng gọi lại,

126
00:09:17,260 --> 00:09:22,535
tôi sẽ truyền thông tin trở lại cấu hình multer của tôi cho

127
00:09:22,535 --> 00:09:27,800
phép tôi xác định làm thế nào tôi sẽ lưu trữ thông tin này.

128
00:09:27,800 --> 00:09:30,590
Vì vậy, đây sẽ là một chức năng mũi tên ở đây.

129
00:09:30,590 --> 00:09:35,800
Bên trong chức năng mũi tên này những gì tôi sẽ kiểm tra là,

130
00:09:35,800 --> 00:09:45,405
Tôi sẽ nói nếu không tập tin tên ban đầu phù hợp.

131
00:09:45,405 --> 00:09:49,340
Vì vậy, tên ban đầu là một chuỗi ở đây.

132
00:09:49,340 --> 00:09:55,780
Vì vậy, tôi đang cố gắng để xem nếu có một trận đấu cho chuỗi đó bằng cách nói,

133
00:09:55,780 --> 00:09:58,260
bên trong đây một biểu thức chính quy.

134
00:09:58,260 --> 00:10:01,570
Vì vậy, biểu thức chính quy tôi sẽ chỉ định nó như dấu

135
00:10:01,570 --> 00:10:05,505
gạch chéo, dấu gạch chéo ngược và sau đó,

136
00:10:05,505 --> 00:10:09,565
các tùy chọn mà tôi sẽ chỉ định là jpg

137
00:10:09,565 --> 00:10:15,530
hoặc jpeg hoặc

138
00:10:15,530 --> 00:10:22,260
png hoặc gif.

139
00:10:25,250 --> 00:10:31,575
Vì vậy, đó là cách tôi chỉ định biểu thức chính quy ở đó.

140
00:10:31,575 --> 00:10:32,785
Để nói rằng okay,

141
00:10:32,785 --> 00:10:38,515
nếu phần mở rộng của tập tin chứa jpg hoặc jpeg hoặc png hoặc gif,

142
00:10:38,515 --> 00:10:44,630
sau đó tôi sẽ coi đó như một tập tin hình ảnh và tôi sẽ sẵn sàng chấp nhận những tập tin đó.

143
00:10:44,630 --> 00:10:47,225
Vì vậy, đó là những gì chúng tôi đang thử nghiệm ở đây.

144
00:10:47,225 --> 00:10:49,690
Nếu đó là trường hợp,

145
00:10:49,690 --> 00:10:54,920
đó là nếu phần mở rộng tập tin không phù hợp với bất kỳ trong số những điều này, vì vậy,

146
00:10:54,920 --> 00:11:02,460
đó là lý do tại sao chúng ta thấy không sau đó chúng ta sẽ nói, trả lại cb.

147
00:11:02,460 --> 00:11:07,890
Sau đó, nhận thấy rằng, các cb tham số đầu tiên sẽ là một lỗi.

148
00:11:07,890 --> 00:11:12,150
Vì vậy, tôi sẽ trả lại một lỗi mới cho

149
00:11:12,150 --> 00:11:18,375
biết bạn chỉ có thể tải lên các tập tin hình ảnh.

150
00:11:18,375 --> 00:11:23,195
Vì vậy, chúng tôi nhấn mạnh rằng các tập tin duy nhất mà họ sẽ

151
00:11:23,195 --> 00:11:28,565
chấp nhận là các tập tin hình ảnh và tham số thứ hai sẽ là sai.

152
00:11:28,565 --> 00:11:32,240
Bởi vì chúng tôi đang cung cấp lỗi như tham số đầu tiên,

153
00:11:32,240 --> 00:11:35,460
tham số thứ hai được đặt thành false.

154
00:11:36,620 --> 00:11:44,340
Nếu không thì nói cb null đúng.

155
00:11:44,340 --> 00:11:49,840
Vì vậy, có nghĩa là các tập tin đang cố gắng để được

156
00:11:49,840 --> 00:11:55,440
tải lên phù hợp với mô hình và do đó Nó là một tập tin hình ảnh,

157
00:11:55,440 --> 00:11:57,955
và vì vậy chúng tôi sẵn sàng để cho nó được tải lên.

158
00:11:57,955 --> 00:12:03,410
Hai cấu hình mà chúng tôi sẽ cung cấp cho mô-đun multer đó.

159
00:12:03,410 --> 00:12:07,475
Làm thế nào để chúng tôi cấu hình mô-đun multer để sử dụng trong ứng dụng của chúng tôi?

160
00:12:07,475 --> 00:12:12,489
Đây là nơi tôi sẽ khai báo const upload

161
00:12:12,489 --> 00:12:19,300
như multer và sau đó tôi sẽ chỉ định trong dấu ngoặc đơn rằng tùy chọn ở đây.

162
00:12:19,300 --> 00:12:27,790
Tôi có thể chỉ định lưu trữ như là chức năng lưu trữ mà tôi vừa định nghĩa ở đây.

163
00:12:27,790 --> 00:12:31,645
Chức năng lưu trữ này như là tham số đầu tiên,

164
00:12:31,645 --> 00:12:35,625
và tham số thứ hai là một bộ lọc tập tin.

165
00:12:35,625 --> 00:12:40,335
Một bộ lọc tập tin là một phương pháp cho phép tôi xác định

166
00:12:40,335 --> 00:12:46,760
loại tập tin mà tôi sẵn sàng chấp nhận và sau đó tôi sẽ nói, bộ lọc tập tin hình ảnh.

167
00:12:46,760 --> 00:12:48,890
Chỉ cần chuyển đổi gói từ,

168
00:12:48,890 --> 00:12:51,860
để bạn có thể nhìn thấy toàn bộ dòng ở đây.

169
00:12:51,860 --> 00:12:57,045
Vì vậy, nó nói rằng bạn chỉ có thể tải lên các tập tin hình ảnh và sau đó cho multer,

170
00:12:57,045 --> 00:13:01,750
tôi đang cấu hình bộ lọc hình ảnh, đó là nó.

171
00:13:01,750 --> 00:13:10,435
Module multer của tôi bây giờ được cấu hình để cho phép tôi tải lên các tập tin hình ảnh ở đây.

172
00:13:10,435 --> 00:13:15,115
Sau đó, bây giờ chúng ta hãy tiếp tục và cấu hình bộ định tuyến tải lên.

173
00:13:15,115 --> 00:13:16,670
Đối với bộ định tuyến tải lên,

174
00:13:16,670 --> 00:13:20,325
tôi sẽ chỉ cho phép phương pháp bài ở đây.

175
00:13:20,325 --> 00:13:21,910
Vì vậy, các

176
00:13:21,910 --> 00:13:30,125
phương pháp lấy, đặt và xóa sẽ không được phép trên điểm cuối bộ định tuyến tải lên.

177
00:13:30,125 --> 00:13:32,130
Để giúp tôi làm điều đó,

178
00:13:32,130 --> 00:13:38,270
tôi sẽ đi đến bộ định tuyến đĩa và sau đó nhớ lại rằng chúng tôi đã đặt cấu hình ở đây đã.

179
00:13:38,270 --> 00:13:42,230
Tôi sẽ sao chép điều đó và sau đó đến

180
00:13:42,230 --> 00:13:47,730
bộ định tuyến tải lên và sau đó tôi sẽ dán thông tin đó ở đây.

181
00:13:47,730 --> 00:13:53,500
Chúng tôi sẽ nói, nếu nó là một hoạt động get sau đó tôi sẽ không

182
00:13:53,500 --> 00:14:02,230
hỗ trợ rằng trên điểm cuối sẽ là ImageUpload.

183
00:14:02,580 --> 00:14:05,545
Việc nhận được sẽ không được phép,

184
00:14:05,545 --> 00:14:13,040
và tương tự như đặt sẽ không được phép,

185
00:14:13,710 --> 00:14:20,000
và cũng xóa sẽ không được phép.

186
00:14:20,640 --> 00:14:31,310
Tôi sẽ không hỗ trợ bất kỳ hoạt động nào, vì vậy hãy đặt, xóa.

187
00:14:31,310 --> 00:14:33,555
Ba người này sẽ không được phép.

188
00:14:33,555 --> 00:14:40,030
Phương pháp duy nhất mà tôi sẽ hỗ trợ là phương pháp bài.

189
00:14:40,030 --> 00:14:41,920
Đối với các bài phương pháp,

190
00:14:41,920 --> 00:14:47,950
chúng tôi sẽ làm xác thực này tất cả các cách lên đến thời điểm đó.

191
00:14:47,950 --> 00:14:50,560
Tôi sẽ chỉ sao chép điều đó trong đó,

192
00:14:50,560 --> 00:14:57,205
đóng điểm cuối đó và cho bài đăng.

193
00:14:57,205 --> 00:14:59,125
Khi một tập tin được đăng,

194
00:14:59,125 --> 00:15:03,035
làm thế nào để chúng tôi xử lý bài đăng này?

195
00:15:03,035 --> 00:15:06,320
Để xử lý bài viết ở đây,

196
00:15:06,320 --> 00:15:09,885
tôi không cần tiếp theo cho việc này.

197
00:15:09,885 --> 00:15:15,485
Bây giờ, ngoài việc xác thực VerifyUser và xác thực VerifyAdmin,

198
00:15:15,485 --> 00:15:21,280
trên cùng một dòng tôi sẽ cấu hình tải lên.

199
00:15:21,280 --> 00:15:27,270
Vì vậy, nhớ lại rằng tôi đã cấu hình tải lên bằng cách sử dụng multer ở đây.

200
00:15:27,270 --> 00:15:29,790
Vì vậy, tôi sẽ sử dụng tải lên

201
00:15:29,790 --> 00:15:34,200
hỗ trợ một chức năng gọi là upload.single.

202
00:15:34,200 --> 00:15:42,400
Chức năng duy nhất này lấy làm tham số.

203
00:15:42,400 --> 00:15:49,630
Tên của trường biểu mẫu trong đó xác định tập tin đó,

204
00:15:49,630 --> 00:15:52,300
bạn sẽ thấy rằng trong một thời gian ngắn.

205
00:15:52,300 --> 00:16:01,930
Trường biểu mẫu này tôi sẽ đặt tên nó là ImageFile ở đây.

206
00:16:01,930 --> 00:16:09,455
Tải lên đơn có nghĩa là nó sẽ cho phép tôi tải lên chỉ một tập tin duy nhất ở đây.

207
00:16:09,455 --> 00:16:15,065
Tập tin duy nhất đó sẽ chỉ định trong biểu mẫu tải lên từ phía khách hàng

208
00:16:15,065 --> 00:16:21,730
trong biểu mẫu đa phần tải lên bằng cách sử dụng tên đó ở đó.

209
00:16:21,860 --> 00:16:26,525
Khi tập tin thu được trong mã,

210
00:16:26,525 --> 00:16:28,060
nếu tôi đi đến thời điểm này,

211
00:16:28,060 --> 00:16:32,290
tải lên này sẽ chăm sóc xử lý các lỗi nếu có bất kỳ,

212
00:16:32,290 --> 00:16:36,585
nếu tập tin không được tải lên đúng cách và vân vân.

213
00:16:36,585 --> 00:16:38,315
Khi bạn đến thời điểm này,

214
00:16:38,315 --> 00:16:40,630
tệp sẽ được tải lên thành công và

215
00:16:40,630 --> 00:16:43,510
vì vậy bạn cần xử lý tệp đã tải lên.

216
00:16:43,510 --> 00:16:52,750
Tại thời điểm này, chúng tôi sẽ nói res.StatusCode là

217
00:16:52,750 --> 00:17:02,780
200 và sau đó res.SeTheader Content-Type,

218
00:17:12,240 --> 00:17:18,920
'ứng dụng/json'. Những gì tôi sẽ làm ở đây là,

219
00:17:19,920 --> 00:17:30,060
chúng tôi sẽ vượt qua trở lại đối tượng req.file này từ máy chủ trở lại khách hàng.

220
00:17:30,060 --> 00:17:36,570
Đối tượng req.file này cũng sẽ chứa đường dẫn đến tập tin trong đó và đường dẫn đó có thể được

221
00:17:36,570 --> 00:17:39,890
sử dụng bởi khách hàng để cấu hình bất kỳ

222
00:17:39,890 --> 00:17:43,735
nơi nào mà nó cần phải biết vị trí của tập tin hình ảnh này.

223
00:17:43,735 --> 00:17:47,355
Ví dụ, nếu bạn đang cố gắng tải lên một món ăn

224
00:17:47,355 --> 00:17:51,060
lên phía máy chủ và các chi tiết của món ăn vào phía máy chủ,

225
00:17:51,060 --> 00:17:53,700
bạn có thể tải lên hình ảnh lên máy chủ và sau đó

226
00:17:53,700 --> 00:17:56,230
bạn lấy lại URL của hình ảnh đó và sau đó bạn có thể

227
00:17:56,230 --> 00:18:02,315
bao gồm URL của hình ảnh đó vào đối tượng json mô tả các món ăn.

228
00:18:02,315 --> 00:18:09,675
Sau đó tải lên tài liệu json món ăn lên phía máy chủ.

229
00:18:09,675 --> 00:18:12,805
Sau đó, req.file được truyền lại cho khách hàng,

230
00:18:12,805 --> 00:18:18,190
req.file như bạn sẽ thấy khi chúng ta chạy máy chủ này,

231
00:18:18,190 --> 00:18:20,670
req.file chứa rất nhiều thông tin về

232
00:18:20,670 --> 00:18:23,370
các tập tin vừa được tải lên và vì vậy tôi sẽ

233
00:18:23,370 --> 00:18:29,700
kiểm tra rằng để có được thông tin về các tập tin mà tôi vừa tải lên.

234
00:18:29,910 --> 00:18:38,405
Đây là cách chúng ta sẽ được cấu hình phương pháp bài có, đó là nó.

235
00:18:38,405 --> 00:18:44,330
Bộ định tuyến tải lên của tôi đã sẵn sàng để chấp nhận tải lên của các tập tin.

236
00:18:44,330 --> 00:18:51,440
Bây giờ, tất cả những gì tôi cần làm là đi đến app.js và sau đó cấu hình bộ định tuyến tải lên.

237
00:18:51,440 --> 00:18:53,335
Vì vậy, đi đến app.js

238
00:18:53,335 --> 00:18:55,550
Chúng tôi đã có tất cả các bộ định tuyến này.

239
00:18:55,550 --> 00:19:00,350
Vì vậy, hãy để tôi chỉ cần sao chép LeaderRouter của họ và sau đó

240
00:19:00,350 --> 00:19:07,475
cấu hình này như UploadRouter.

241
00:19:07,475 --> 00:19:14,150
Vì vậy, đây là trong tập tin UploadRouter ở đây.

242
00:19:14,150 --> 00:19:18,965
Vì vậy, chúng tôi sẽ cấu hình UploadRouter và sau đó đi xuống dưới đây,

243
00:19:18,965 --> 00:19:28,010
bây giờ chúng tôi sẽ cấu hình điểm cuối ImageUpload.

244
00:19:28,010 --> 00:19:32,525
Vì vậy, điểm cuối ImageUpload cho phép tôi tải lên các tập tin.

245
00:19:32,525 --> 00:19:37,880
Vì vậy, đây sẽ là UploadRouter. Đó là nó.

246
00:19:37,880 --> 00:19:44,740
Ứng dụng của tôi bây giờ được cấu hình để chấp nhận tải lên tệp.

247
00:19:44,740 --> 00:19:51,130
Vì vậy, chúng ta hãy lưu các thay đổi và sau đó đi và xem ứng dụng của chúng tôi hoạt động như thế nào.

248
00:19:51,130 --> 00:19:53,700
Quay trở lại Terminal,

249
00:19:53,700 --> 00:19:58,310
bây giờ hãy chắc chắn rằng bạn có máy chủ MongoDB

250
00:19:58,310 --> 00:20:03,020
của bạn lên và chạy trong một trong các tab Terminal hoặc trong một trong các lệnh Windows.

251
00:20:03,020 --> 00:20:04,640
Trong cửa sổ khác,

252
00:20:04,640 --> 00:20:09,210
chúng ta hãy khởi động máy chủ.

253
00:20:09,210 --> 00:20:12,455
Một khi máy chủ của chúng tôi đang hoạt động và chạy,

254
00:20:12,455 --> 00:20:20,120
chúng tôi sẽ truy cập Postman và sau đó gửi hoặc thay vì tải lên một tập tin từ Postman.

255
00:20:20,120 --> 00:20:22,435
Vì vậy, như tôi đã đề cập,

256
00:20:22,435 --> 00:20:24,090
để tải lên một tập tin,

257
00:20:24,090 --> 00:20:26,920
bạn sẽ được sử dụng multipart/form-data.

258
00:20:26,920 --> 00:20:29,865
Vì vậy, trước tiên, hãy để tôi đăng nhập vào bản thân mình.

259
00:20:29,865 --> 00:20:33,560
Vì vậy, tôi sẽ làm một bài đăng trên người dùng địa phương đăng nhập,

260
00:20:33,560 --> 00:20:36,140
và tôi sẽ đăng nhập bản thân mình với tư cách là quản trị viên bởi vì

261
00:20:36,140 --> 00:20:38,815
chỉ có quản trị viên mới có thể tải lên các tập tin của họ ở đó.

262
00:20:38,815 --> 00:20:45,350
Nhớ lại rằng máy chủ của bạn hiện đang chạy tại cổng an toàn.

263
00:20:45,350 --> 00:20:52,580
Vì vậy, chúng tôi sẽ nói https://localhost:3443,

264
00:20:52,580 --> 00:20:56,090
và không có ủy quyền ở đây.

265
00:20:56,090 --> 00:21:03,235
Vì vậy, hãy để tôi tắt ủy quyền ở đây và sau đó gửi yêu cầu đến máy chủ.

266
00:21:03,235 --> 00:21:06,005
Vì vậy, trong Postman, nếu điều này đang xảy ra,

267
00:21:06,005 --> 00:21:09,790
rằng nó nói không thể nhận được bất kỳ phản hồi,

268
00:21:09,790 --> 00:21:15,025
điều này là bởi vì bạn đang chạy máy chủ an toàn.

269
00:21:15,025 --> 00:21:17,095
Vì vậy, trong trường hợp đó,

270
00:21:17,095 --> 00:21:23,170
Postman sẽ không chấp nhận chứng chỉ tự ký đang đến.

271
00:21:23,170 --> 00:21:28,790
Vì vậy, trong trường hợp đó, mở cài đặt ở đây và trong cài đặt,

272
00:21:28,790 --> 00:21:31,360
trong trường cài đặt chung,

273
00:21:31,360 --> 00:21:34,765
bạn sẽ thấy xác minh chứng chỉ SSL này.

274
00:21:34,765 --> 00:21:38,580
Tắt tính năng đó để Postman của bạn sẵn sàng chấp nhận

275
00:21:38,580 --> 00:21:43,975
chứng chỉ tự ký mà chúng tôi đã cài đặt ở phía máy chủ.

276
00:21:43,975 --> 00:21:47,450
Vì vậy, đây là cách bạn sẽ có thể liên hệ với máy chủ của bạn tại

277
00:21:47,450 --> 00:21:53,300
điểm cuối đăng nhập người dùng https://localhost:3443.

278
00:21:53,300 --> 00:21:55,775
Vì vậy, khi chúng tôi cố gắng đăng nhập ngay bây giờ,

279
00:21:55,775 --> 00:21:59,750
bây giờ bạn sẽ thấy rằng yêu cầu bài đăng của bạn đã được

280
00:21:59,750 --> 00:22:03,035
chấp nhận thành công bởi máy chủ

281
00:22:03,035 --> 00:22:06,275
và sau đó máy chủ trả lời với thông tin mã thông báo.

282
00:22:06,275 --> 00:22:12,515
Vì vậy, một lần nữa, để đảm bảo rằng Postman cho phép bạn liên hệ với máy chủ an toàn,

283
00:22:12,515 --> 00:22:16,264
hãy nhấp vào Cài đặt và dưới Chung,

284
00:22:16,264 --> 00:22:20,645
tắt xác nhận chứng chỉ SSL.

285
00:22:20,645 --> 00:22:23,195
Vì vậy, một khi bạn đăng nhập,

286
00:22:23,195 --> 00:22:25,605
chúng ta hãy sao chép mã thông báo ở đây.

287
00:22:25,605 --> 00:22:28,290
Vì vậy, tôi sẽ sao chép mã thông báo ở đây.

288
00:22:28,290 --> 00:22:31,000
Bây giờ, chúng ta hãy thử tải lên tệp.

289
00:22:31,000 --> 00:22:34,215
Để tải lên các tập tin, như bạn nhận thấy,

290
00:22:34,215 --> 00:22:36,830
chúng ta cần phải tải lên tập tin này tại localhost:3443,

291
00:22:36,830 --> 00:22:46,080
và điểm cuối là ImageUpload.

292
00:22:47,680 --> 00:22:51,200
Để thực hiện ImageUpload ở đây,

293
00:22:51,200 --> 00:22:57,360
trong Tiêu đề, chúng ta cần cấu hình ủy quyền.

294
00:22:57,490 --> 00:23:00,560
Vì vậy, chúng tôi sẽ cấu hình ủy quyền,

295
00:23:00,560 --> 00:23:03,035
và sau đó bạn sẽ nói,

296
00:23:03,035 --> 00:23:08,820
“Người mang”, và cung cấp một mã thông báo mà chúng tôi đã thu được.

297
00:23:08,820 --> 00:23:14,785
Vì vậy, giữ một bản sao của mã thông báo ở đâu đó và sao chép trong mã thông báo vào Tiêu đề.

298
00:23:14,785 --> 00:23:18,260
Trong cơ thể, để tải lên một tập tin,

299
00:23:18,260 --> 00:23:20,030
chúng tôi sẽ sử dụng dữ liệu hình thức này.

300
00:23:20,030 --> 00:23:24,020
Vì vậy, đây là những gì cho phép bạn làm nhiều phần/hình thức dữ liệu ở đây.

301
00:23:24,020 --> 00:23:26,625
Vì vậy, khi bạn nhấp vào biểu mẫu dữ liệu,

302
00:23:26,625 --> 00:23:32,310
ở đây bạn có thể cung cấp tệp đó ở đây mà bạn muốn tải lên.

303
00:23:32,310 --> 00:23:36,040
Vì vậy, khi bạn nhấp vào một phím mới ở đây,

304
00:23:37,870 --> 00:23:43,040
sử dụng phím này như ImageFile.

305
00:23:43,040 --> 00:23:52,695
Nhớ lại rằng khi chúng tôi cấu hình phương pháp bài đăng trên trang UploadRouter,

306
00:23:52,695 --> 00:23:56,515
chúng tôi đã chỉ định nói tải lên đơn một ImageFile.

307
00:23:56,515 --> 00:23:59,670
Vì vậy, đó là chìa khóa tương tự mà bạn sẽ sử dụng ở đây.

308
00:23:59,670 --> 00:24:03,410
Sau đó, khi bạn đưa chìa khóa,

309
00:24:03,410 --> 00:24:05,270
sau đó phần thứ hai,

310
00:24:05,270 --> 00:24:09,875
bạn sẽ đặt điều này từ Text sang File ở đây.

311
00:24:09,875 --> 00:24:15,595
Vì vậy, đây là những gì cho phép bạn chỉ định tệp làm giá trị cho khóa cụ thể này.

312
00:24:15,595 --> 00:24:20,045
Vì vậy, sau đó bạn sẽ thấy nút này đến nói, “Chọn tệp”.

313
00:24:20,045 --> 00:24:25,505
Vì vậy, bạn có thể mở và sau đó chọn một tập tin mà bạn muốn tải lên.

314
00:24:25,505 --> 00:24:30,060
Vì vậy, ở đây, tôi sẽ đi đến tôi,

315
00:24:30,160 --> 00:24:37,470
Tôi có một tập tin trong một trong các thư mục của tôi ở đây.

316
00:24:37,470 --> 00:24:41,685
Vì vậy, tôi chỉ đi vào hình ảnh tài sản,

317
00:24:41,685 --> 00:24:46,640
và sau đó chúng tôi sẽ chỉ tải lên một tập tin PNG từ đây.

318
00:24:46,640 --> 00:24:48,230
Vì vậy, bạn có thể nói,

319
00:24:48,230 --> 00:24:50,280
“Tải lên tệp cụ thể.”

320
00:24:50,280 --> 00:24:52,100
Vì vậy, như bạn nhớ lại,

321
00:24:52,100 --> 00:24:56,020
chúng tôi đã cấu hình máy chủ của chúng tôi để chỉ chấp nhận ImageFile.

322
00:24:56,020 --> 00:24:58,720
Vì vậy, chúng tôi sẽ nói, “Tải lên tệp cụ thể đó.”

323
00:24:58,720 --> 00:25:03,050
Sau đó, khi bạn nhấp vào nút Gửi,

324
00:25:03,050 --> 00:25:04,940
vì vậy hãy lưu ý rằng trong cơ thể,

325
00:25:04,940 --> 00:25:07,145
bạn phải cấu hình điều này với biểu mẫu dữ liệu.

326
00:25:07,145 --> 00:25:11,240
Vì vậy, multipart/form-data, và sau đó chìa khóa là ImageFile,

327
00:25:11,240 --> 00:25:15,440
và giá trị là tệp mà bạn vừa chọn,

328
00:25:15,440 --> 00:25:17,575
và sau đó nhấp vào nút Gửi.

329
00:25:17,575 --> 00:25:19,940
Vì vậy, khi bạn nhấp vào nút Gửi,

330
00:25:19,940 --> 00:25:23,670
tập tin sẽ được tải lên phía máy chủ của bạn và

331
00:25:23,670 --> 00:25:27,770
sau đó máy chủ sẽ trả lời lại với đối tượng này.

332
00:25:27,770 --> 00:25:29,770
Vì vậy, đây là những gì được chứa trong

333
00:25:29,770 --> 00:25:34,820
đối tượng req.file đó là có trên đối tượng yêu cầu ở đây.

334
00:25:34,820 --> 00:25:38,250
Vì vậy, req.file này, như bạn thấy, chứa một tên trường.

335
00:25:38,250 --> 00:25:39,590
Tên trường là ImageFile.

336
00:25:39,590 --> 00:25:43,200
Vì vậy, chú ý rằng điều này là chính xác giống như cái này ở đây.

337
00:25:43,200 --> 00:25:50,290
Tên gốc, do đó, lưu ý rằng biểu thức originalname chứa alberto.png,

338
00:25:50,290 --> 00:25:52,915
đó là tập tin mà tôi tải lên.

339
00:25:52,915 --> 00:25:56,250
Bây giờ bạn có thể thấy lý do tại sao khi tôi cấu

340
00:25:56,250 --> 00:26:00,905
hình bộ nhớ và tên tập tin, tôi đặt file.originalname.

341
00:26:00,905 --> 00:26:03,515
Vì vậy, đây là những gì sẽ được sử dụng ở đó.

342
00:26:03,515 --> 00:26:05,410
Bạn có thể thấy loại mã hóa,

343
00:26:05,410 --> 00:26:08,745
và mimetype, và đích,

344
00:26:08,745 --> 00:26:10,995
thư mục tệp đã được đưa vào,

345
00:26:10,995 --> 00:26:13,060
và đường dẫn thực tế của tệp ở đây, đường dẫn

346
00:26:13,060 --> 00:26:18,240
tương đối từ thư mục gốc của thư mục máy chủ ở đây.

347
00:26:18,240 --> 00:26:23,555
Vì vậy, đường dẫn này chỉ ra nơi tập tin có thể truy cập ở phía máy chủ.

348
00:26:23,555 --> 00:26:29,865
Vì vậy, nếu bạn đang cấu hình các chi tiết của một món ăn hoặc một nhà lãnh đạo, ví dụ,

349
00:26:29,865 --> 00:26:37,490
bạn chỉ cần sử dụng thuộc tính hình ảnh của nhà lãnh đạo để images/alberto.png.

350
00:26:37,490 --> 00:26:40,390
Công cộng không nên được sử dụng anyway vì mục tin thư thoại công cộng là

351
00:26:40,390 --> 00:26:43,420
một trong đó hoạt động như thư mục gốc cho máy chủ của chúng tôi.

352
00:26:43,420 --> 00:26:46,560
Vì vậy, bạn chỉ cần cung cấp những hình ảnh này.alberto.

353
00:26:46,560 --> 00:26:49,475
Vì vậy, từ đường dẫn này mà bạn có được,

354
00:26:49,475 --> 00:26:52,685
một khi các tập tin được tải lên thành công,

355
00:26:52,685 --> 00:26:58,130
trích xuất phần này và sau đó sử dụng nó cho hình ảnh trong

356
00:26:58,130 --> 00:27:04,265
tài liệu JSON của bạn mô tả các nhà lãnh đạo cụ thể.

357
00:27:04,265 --> 00:27:09,260
Vì vậy, đó là cách chúng tôi tải lên một tập tin.

358
00:27:09,260 --> 00:27:11,985
Bây giờ, để thuyết phục các bạn rằng tiền phạt thực sự đã được tải lên, chúng

359
00:27:11,985 --> 00:27:14,375
ta hãy đi đến dự án của chúng tôi.

360
00:27:14,375 --> 00:27:16,655
Đi đến dự án của chúng tôi,

361
00:27:16,655 --> 00:27:22,215
trong thư mục công cộng,

362
00:27:22,215 --> 00:27:26,325
bây giờ bạn có thể thấy rằng có một thư mục con hình ảnh ở đó.

363
00:27:26,325 --> 00:27:28,120
Trong thư mục con hình ảnh,

364
00:27:28,120 --> 00:27:32,785
bạn có thể thấy tệp alberta.png được tải lên trong đó.

365
00:27:32,785 --> 00:27:37,635
Bây giờ, chúng ta có thể tải thêm ImageFiles vào phía máy chủ của chúng tôi.

366
00:27:37,635 --> 00:27:40,425
Bây giờ, nếu bạn cố gắng tải lên một tập tin phi ImageFile,

367
00:27:40,425 --> 00:27:42,980
bạn sẽ thấy rằng máy chủ sẽ không chấp nhận

368
00:27:42,980 --> 00:27:46,660
một tập tin phi ImageFile và sau đó sẽ trả lời lại rằng,

369
00:27:46,660 --> 00:27:49,180
“Không thể chấp nhận tập tin phi ImageFile.”

370
00:27:49,180 --> 00:27:54,050
Vì vậy, đây là cách chúng tôi sẽ cấu hình máy chủ thể hiện của chúng tôi

371
00:27:54,050 --> 00:27:59,390
để chấp nhận tải lên của ImageFiles từ phía khách hàng của chúng tôi.

372
00:27:59,390 --> 00:28:03,065
Với điều này, chúng tôi hoàn thành bài tập này.

373
00:28:03,065 --> 00:28:05,400
Trong bài tập này, chúng ta đã thấy cách chúng ta sử dụng

374
00:28:05,400 --> 00:28:09,840
mô-đun meta để cấu hình máy chủ thể hiện của chúng tôi để

375
00:28:09,840 --> 00:28:17,735
chấp nhận tải lên tệp trên một điểm cuối API /ImageUpload Rest.

376
00:28:17,735 --> 00:28:19,840
Khi chúng tôi đăng lên điểm cuối,

377
00:28:19,840 --> 00:28:25,585
tệp sẽ được tải lên một thư mục được chỉ định trên trang web máy chủ.

378
00:28:25,585 --> 00:28:27,900
Với điều này, chúng tôi hoàn thành bài tập này.

379
00:28:27,900 --> 00:28:34,890
Đây là thời điểm tốt để bạn thực hiện một cam kết git với thông điệp 'file upload'.