1
00:00:01,210 --> 00:00:04,730
‫Jonas: In questa seconda parte del caricamento delle immagini

2
00:00:04,730 --> 00:00:06,943
‫del tour, le elaboreremo tutte.

3
00:00:08,670 --> 00:00:10,300
‫Ma prima di

4
00:00:10,300 --> 00:00:12,330
‫iniziare a farlo, c'è qualcosa

5
00:00:12,330 --> 00:00:14,500
‫che devo sistemare nel controller utente.

6
00:00:14,500 --> 00:00:18,530
‫E quindi in realtà in questo resizeUserPhoto,

7
00:00:18,530 --> 00:00:21,110
‫e cioè che dobbiamo

8
00:00:21,110 --> 00:00:25,210
‫davvero aspettare l'intera operazione qui, va bene?

9
00:00:25,210 --> 00:00:28,940
‫Quindi tutto questo qui in realtà restituirà una promessa, e

10
00:00:28,940 --> 00:00:30,640
‫questo ha senso, giusto,

11
00:00:30,640 --> 00:00:33,950
‫perché tutte queste operazioni qui richiedono del tempo,

12
00:00:33,950 --> 00:00:36,460
‫e quindi ovviamente accadono in background.

13
00:00:36,460 --> 00:00:38,390
‫Quindi sono codice asincrono e

14
00:00:38,390 --> 00:00:41,850
‫quindi ovviamente non dovrebbero bloccare il ciclo degli eventi.

15
00:00:41,850 --> 00:00:43,940
‫Ora il problema qui è

16
00:00:43,940 --> 00:00:46,260
‫che in questo momento stiamo chiamando questa

17
00:00:46,260 --> 00:00:49,030
‫prossima funzione qui, quindi il prossimo middleware, senza

18
00:00:49,030 --> 00:00:51,330
‫effettivamente aspettare che queste operazioni qui finiscano.

19
00:00:51,330 --> 00:00:53,380
‫E questa non è una buona idea.

20
00:00:53,380 --> 00:00:55,653
‫E quindi usiamo semplicemente

21
00:00:56,800 --> 00:01:01,483
‫wait qui, e poi ovviamente asincrono, e tutta quella roba.

22
00:01:02,520 --> 00:01:04,483
‫Quindi catchAsync qui.

23
00:01:07,110 --> 00:01:11,020
‫Va bene, salvalo ed è molto meglio.

24
00:01:11,020 --> 00:01:12,930
‫E così ora faremo qualcosa

25
00:01:12,930 --> 00:01:15,580
‫di molto simile con le immagini del nostro tour.

26
00:01:15,580 --> 00:01:18,150
‫E quindi lasciami andare avanti e copiare questo.

27
00:01:20,850 --> 00:01:22,540
‫Va bene, e anche

28
00:01:22,540 --> 00:01:26,923
‫se non sarà esattamente lo stesso, è bello averlo già qui.

29
00:01:28,760 --> 00:01:31,113
‫Quindi anche questa sarà una funzione asincrona.

30
00:01:36,440 --> 00:01:39,320
‫Bene, ora come prima, nel caso in cui

31
00:01:39,320 --> 00:01:41,740
‫non ci siano immagini caricate,

32
00:01:41,740 --> 00:01:44,390
‫allora vogliamo passare direttamente al prossimo middleware.

33
00:01:45,770 --> 00:01:50,290
‫Quindi se non ci sono richieste. file, e in realtà farò

34
00:01:50,290 --> 00:01:52,620
‫un ulteriore passo avanti, richiedendo che

35
00:01:52,620 --> 00:01:55,300
‫ci siano sia la copertina dell'immagine che

36
00:01:55,300 --> 00:01:56,690
‫anche le immagini.

37
00:01:56,690 --> 00:01:59,450
‫E quindi fondamentalmente vogliamo passare al prossimo middleware nel caso non

38
00:01:59,450 --> 00:02:02,663
‫ci siano richieste. File. imageCover,

39
00:02:06,150 --> 00:02:11,150
‫o nessuna richiesta. File. immagini.

40
00:02:15,240 --> 00:02:18,463
‫Quindi in tal caso, il prossimo.

41
00:02:20,840 --> 00:02:24,003
‫Ok, e ora iniziamo elaborando l'immagine di

42
00:02:26,860 --> 00:02:31,420
‫copertina e poi tutte le altre immagini in un ciclo,

43
00:02:31,420 --> 00:02:32,623
‫in pratica.

44
00:02:34,220 --> 00:02:36,170
‫Quindi altre immagini.

45
00:02:36,170 --> 00:02:39,550
‫Ora, dove otteniamo effettivamente l'immagine di copertina?

46
00:02:39,550 --> 00:02:44,460
‫Ricordo bene come ho detto che è su richiesta. File?

47
00:02:44,460 --> 00:02:47,403
‫Non più file, e poi . coverImage, o

48
00:02:49,080 --> 00:02:50,610
‫in realtà imageCover.

49
00:02:50,610 --> 00:02:52,653
‫E poi ricordi come fosse un array?

50
00:02:53,610 --> 00:02:56,113
‫Quindi diamo un'occhiata a questo ancora una volta.

51
00:02:58,850 --> 00:03:02,170
‫Giusto, quindi tutto questo è richiesta. file, e

52
00:03:02,170 --> 00:03:05,161
‫poi da lì prendiamo imageCover, e questo

53
00:03:05,161 --> 00:03:07,950
‫è un array di un elemento.

54
00:03:07,950 --> 00:03:11,710
‫E quindi ora vogliamo l'elemento numero zero, e

55
00:03:11,710 --> 00:03:13,780
‫poi . respingente.

56
00:03:13,780 --> 00:03:17,120
‫Quindi questa cosa dall'aspetto strano qui.

57
00:03:17,120 --> 00:03:20,750
‫Quindi vogliamo ridimensionarlo a un rapporto di

58
00:03:20,750 --> 00:03:23,710
‫2/3, e la larghezza sarà

59
00:03:23,710 --> 00:03:28,090
‫di 2.000 pixel e l'altezza di 1.333, va bene?

60
00:03:28,090 --> 00:03:31,380
‫E così di nuovo, questo è un buon rapporto 3/2,

61
00:03:31,380 --> 00:03:33,750
‫che è molto comune nelle immagini.

62
00:03:33,750 --> 00:03:38,687
‫Successivamente, vogliamo anche formattarlo come JPEG con una qualità del 90%,

63
00:03:38,687 --> 00:03:40,820
‫quindi salvarlo come file.

64
00:03:40,820 --> 00:03:43,763
‫Ma questa volta si tratta di

65
00:03:45,828 --> 00:03:49,230
‫image/tours, e qui definiamo il nostro nome file separatamente.

66
00:03:50,890 --> 00:03:54,480
‫D'accordo, perché ne avremo davvero bisogno di nuovo.

67
00:03:54,480 --> 00:03:56,557
‫Quindi imageCoverFilename, e quindi

68
00:04:00,330 --> 00:04:04,110
‫ancora una volta dobbiamo creare un nome file univoco.

69
00:04:04,110 --> 00:04:08,070
‫Quindi ora è tour, quindi mettiamo di nuovo

70
00:04:08,070 --> 00:04:12,380
‫l'ID del tour qui, dove prima era l'ID dell'utente.

71
00:04:12,380 --> 00:04:16,010
‫E quindi è su richiesta. params, quindi ricorda che

72
00:04:16,010 --> 00:04:17,770
‫questo percorso conterrà sempre

73
00:04:17,770 --> 00:04:20,140
‫l'ID del tour, quindi è

74
00:04:20,140 --> 00:04:24,393
‫su richiesta. parametri. ID.

75
00:04:26,290 --> 00:04:31,290
‫Poi di nuovo il timestamp, Data. ora, e poi diciamo

76
00:04:33,810 --> 00:04:38,060
‫che questa è l'immagine di copertina, ok?

77
00:04:38,060 --> 00:04:40,720
‫E gli altri riceveranno dei numeri.

78
00:04:40,720 --> 00:04:44,843
‫E poi ovviamente. jpeg, quindi usiamolo qui.

79
00:04:45,890 --> 00:04:47,807
‫Quindi imageCoverFilename.

80
00:04:49,130 --> 00:04:52,100
‫Ok, e ora come ultimo passaggio, dobbiamo effettivamente

81
00:04:52,100 --> 00:04:53,720
‫rendere possibile che

82
00:04:53,720 --> 00:04:55,660
‫il nostro gestore del tour

83
00:04:55,660 --> 00:04:59,230
‫di aggiornamento raccolga questo nome file di copertina dell'immagine per

84
00:04:59,230 --> 00:05:01,680
‫aggiornarlo nel documento del tour corrente, ok?

85
00:05:01,680 --> 00:05:03,290
‫Quindi diamo rapidamente

86
00:05:03,290 --> 00:05:06,830
‫un'occhiata a come viene effettivamente aggiornato il documento.

87
00:05:06,830 --> 00:05:08,780
‫E quindi stiamo semplicemente

88
00:05:08,780 --> 00:05:11,290
‫usando questa funzione di fabbrica updateOne.

89
00:05:11,290 --> 00:05:14,430
‫E quello in realtà aggiornerà semplicemente tutti i dati

90
00:05:14,430 --> 00:05:17,163
‫che sono nel corpo sul nuovo documento.

91
00:05:18,460 --> 00:05:21,670
‫Quindi, solo per dimostrartelo proprio qui.

92
00:05:21,670 --> 00:05:26,670
‫Quindi updateOne, prende l'intera richiesta. corpo, ok?

93
00:05:26,730 --> 00:05:29,920
‫E quindi ora il segreto è mettere effettivamente questo nome

94
00:05:29,920 --> 00:05:34,313
‫file di copertina dell'immagine su richiesta. corpo, va bene?

95
00:05:36,720 --> 00:05:39,760
‫Quindi richiesta. corpo. immagine di copertina.

96
00:05:41,840 --> 00:05:45,270
‫Oh e ancora, si chiama imageCover

97
00:05:45,270 --> 00:05:49,850
‫invece, dovrebbe essere uguale a imageCoverFilename, ok, ha senso?

98
00:05:52,350 --> 00:05:54,350
‫E ovviamente si chiama imageCover

99
00:05:54,350 --> 00:05:57,710
‫perché questo è il nome che abbiamo nella definizione dello schema.

100
00:05:57,710 --> 00:05:59,730
‫Quindi, quando esegue l'aggiornamento,

101
00:05:59,730 --> 00:06:02,280
‫abbinerà questo campo nel corpo con

102
00:06:02,280 --> 00:06:04,530
‫il campo nel nostro database.

103
00:06:04,530 --> 00:06:06,920
‫E in realtà possiamo rifattorizzare un po'

104
00:06:06,920 --> 00:06:10,950
‫questo perché non abbiamo affatto bisogno di questo nome di variabile qui.

105
00:06:10,950 --> 00:06:15,113
‫Quindi potremmo semplicemente mettere questo nome di file qui proprio sul corpo.

106
00:06:16,040 --> 00:06:20,260
‫Quindi mettilo qui e poi usalo qui subito.

107
00:06:20,260 --> 00:06:23,390
‫Quindi non abbiamo affatto bisogno di questa riga di codice.

108
00:06:23,390 --> 00:06:27,430
‫Ottimo, e ora prima di passare alle altre immagini, proviamolo effettivamente

109
00:06:27,430 --> 00:06:29,940
‫con quello che abbiamo già a

110
00:06:29,940 --> 00:06:30,903
‫questo punto.

111
00:06:31,980 --> 00:06:35,080
‫Quindi sbarazziamoci di questa console. log, quindi

112
00:06:35,080 --> 00:06:37,170
‫quando facciamo la richiesta, la

113
00:06:37,170 --> 00:06:40,100
‫nostra immagine di copertina dovrebbe essere

114
00:06:40,100 --> 00:06:43,950
‫già caricata e inserita nel documento del tour, ok?

115
00:06:43,950 --> 00:06:46,870
‫Quindi queste altre tre immagini qui ovviamente no, ma

116
00:06:46,870 --> 00:06:48,300
‫almeno la copertina

117
00:06:48,300 --> 00:06:50,183
‫dell'immagine dovrebbe funzionare a questo punto,

118
00:06:51,340 --> 00:06:53,253
‫almeno se abbiamo fatto tutto correttamente.

119
00:06:54,410 --> 00:06:56,863
‫Quindi vediamo se è da qualche parte qui

120
00:06:57,760 --> 00:06:59,963
‫e le immagini sono ancora vuote ovviamente.

121
00:07:00,970 --> 00:07:05,970
‫Ma ora sto cercando l'immagine di copertina, quindi dov'è?

122
00:07:06,640 --> 00:07:09,280
‫Ed eccolo qui, quindi imageCover, e quindi

123
00:07:09,280 --> 00:07:11,843
‫assomiglia molto al nome del file

124
00:07:11,843 --> 00:07:13,970
‫che abbiamo appena specificato.

125
00:07:13,970 --> 00:07:18,970
‫E in realtà proviamo a ricaricare la nostra pagina di tutti i tour qui, e forse

126
00:07:21,130 --> 00:07:23,550
‫il nostro nuovo tour è già qui.

127
00:07:23,550 --> 00:07:28,430
‫Ah, ci siamo, quindi questo è il nuovo tour in mountain bike.

128
00:07:28,430 --> 00:07:32,180
‫E questa è davvero l'immagine che abbiamo appena caricato.

129
00:07:32,180 --> 00:07:34,090
‫Così bello.

130
00:07:34,090 --> 00:07:36,300
‫Ora, se proviamo ad

131
00:07:36,300 --> 00:07:40,870
‫aprire questa pagina, le altre immagini non sono qui, ok?

132
00:07:40,870 --> 00:07:42,780
‫Quindi non si trovano da

133
00:07:42,780 --> 00:07:45,513
‫nessuna parte, e ovviamente è quello che faremo dopo.

134
00:07:47,520 --> 00:07:48,353
‫Va bene.

135
00:07:50,340 --> 00:07:52,820
‫Quindi ricorda che le nostre

136
00:07:52,820 --> 00:07:55,700
‫immagini qui sono anche un array,

137
00:07:55,700 --> 00:07:59,360
‫che quindi contiene tutti questi nuovi caricamenti di file.

138
00:07:59,360 --> 00:08:01,500
‫E quindi ora usiamo effettivamente un

139
00:08:01,500 --> 00:08:03,833
‫ciclo per elaborare ciascuno di essi in un'iterazione.

140
00:08:04,900 --> 00:08:09,700
‫Quindi richiesta. File. immagini. per ciascuno.

141
00:08:14,330 --> 00:08:15,810
‫E poi la nostra

142
00:08:15,810 --> 00:08:18,823
‫funzione di callback in cui otteniamo l'accesso al file corrente.

143
00:08:21,200 --> 00:08:23,780
‫Bene, ora qui abbiamo effettivamente bisogno di

144
00:08:23,780 --> 00:08:26,560
‫creare il nome del file corrente e vedrai

145
00:08:26,560 --> 00:08:28,210
‫perché in un secondo.

146
00:08:29,550 --> 00:08:33,850
‫Quindi il nome del file è uguale e quindi qualcosa di molto simile a questo.

147
00:08:35,758 --> 00:08:38,160
‫Con la differenza che adesso non si tratta

148
00:08:38,160 --> 00:08:41,230
‫di cover, ma invece le vogliamo chiamare uno, due e tre.

149
00:08:41,230 --> 00:08:43,040
‫E quindi nella

150
00:08:43,040 --> 00:08:47,173
‫nostra funzione di callback otteniamo anche l'accesso all'indice corrente, ok?

151
00:08:48,920 --> 00:08:53,920
‫Quindi abbiamo bisogno di file e io di index.

152
00:08:54,220 --> 00:08:57,923
‫E quindi qui non è copertina, ma indice più uno.

153
00:09:00,330 --> 00:09:04,240
‫Quindi più uno, ed è solo

154
00:09:04,240 --> 00:09:09,010
‫perché questo indice è in base zero, ok?

155
00:09:09,010 --> 00:09:11,693
‫Successivamente viene la fase di elaborazione stessa, che

156
00:09:13,060 --> 00:09:15,603
‫è di nuovo molto simile a questa.

157
00:09:17,400 --> 00:09:21,873
‫E ora ovviamente dobbiamo contrassegnare anche questo come asincrono.

158
00:09:23,660 --> 00:09:27,083
‫Va bene, e qui sotto ora c'è il nome del file.

159
00:09:29,360 --> 00:09:33,570
‫Ok, ora perché abbiamo davvero bisogno di questo nome file?

160
00:09:33,570 --> 00:09:37,250
‫Bene, ne abbiamo bisogno perché ora dobbiamo inserire questo

161
00:09:37,250 --> 00:09:42,250
‫nome file in request. corpo. immagini, e quindi questa è esattamente la stessa logica

162
00:09:42,280 --> 00:09:45,913
‫che avevamo qui prima su richiesta. corpo. immagineCopertina.

163
00:09:47,040 --> 00:09:49,020
‫Quindi ricorda che nella nostra

164
00:09:49,020 --> 00:09:52,870
‫collezione, richiesta. corpo. immagini è in realtà un array.

165
00:09:52,870 --> 00:09:55,610
‫E quindi ora dobbiamo creare quell'array e avviarlo

166
00:09:55,610 --> 00:09:57,343
‫come un array vuoto.

167
00:09:58,400 --> 00:10:01,430
‫Quindi richiesta. corpo. images

168
00:10:03,870 --> 00:10:07,150
‫come un array vuoto, quindi in ogni iterazione

169
00:10:07,150 --> 00:10:09,720
‫inseriremo il nome del file corrente

170
00:10:09,720 --> 00:10:11,770
‫in questo array di immagini.

171
00:10:11,770 --> 00:10:15,070
‫Quindi richiesta. corpo. immagini. push,

172
00:10:19,580 --> 00:10:23,370
‫il nome del file, va bene?

173
00:10:23,370 --> 00:10:25,100
‫E con questo abbiamo quasi finito.

174
00:10:25,100 --> 00:10:27,020
‫C'è solo un piccolo problema, che

175
00:10:27,020 --> 00:10:28,530
‫è il fatto che

176
00:10:28,530 --> 00:10:31,710
‫in questo caso non stiamo usando async attendere correttamente, quindi

177
00:10:31,710 --> 00:10:33,200
‫in questo ciclo.

178
00:10:33,200 --> 00:10:35,560
‫E questo perché questa attesa asincrona

179
00:10:35,560 --> 00:10:38,450
‫qui è solo all'interno di questa funzione di

180
00:10:38,450 --> 00:10:40,550
‫callback del ciclo foreach.

181
00:10:40,550 --> 00:10:42,880
‫E quindi questo in realtà

182
00:10:42,880 --> 00:10:46,300
‫non impedirà al codice di spostarsi proprio accanto a

183
00:10:46,300 --> 00:10:49,390
‫questa riga dove chiameremo il prossimo middleware, ok?

184
00:10:49,390 --> 00:10:52,510
‫Quindi di nuovo, in questo momento in realtà non stiamo

185
00:10:52,510 --> 00:10:55,940
‫aspettando nulla di tutto questo qui, di nuovo, perché questa attesa asincrona

186
00:10:55,940 --> 00:10:58,000
‫si verifica all'interno della funzione di

187
00:10:58,000 --> 00:11:00,440
‫callback di uno di questi metodi di ciclo.

188
00:11:00,440 --> 00:11:03,310
‫E ci imbattiamo in questo tipo di problema

189
00:11:03,310 --> 00:11:06,040
‫in realtà prima, ma fortunatamente c'è una soluzione

190
00:11:06,040 --> 00:11:08,970
‫per questo, perché poiché questa è una funzione

191
00:11:08,970 --> 00:11:11,470
‫asincrona qui, restituirà una nuova promessa.

192
00:11:11,470 --> 00:11:13,610
‫Quindi, se facciamo una mappa,

193
00:11:13,610 --> 00:11:17,210
‫possiamo effettivamente salvare una serie di tutte queste promesse.

194
00:11:17,210 --> 00:11:18,910
‫E poi se abbiamo un array

195
00:11:18,910 --> 00:11:22,190
‫possiamo usare la promessa. tutti in attesa di tutti loro.

196
00:11:22,190 --> 00:11:24,530
‫E così con ciò aspetteremo effettivamente fino

197
00:11:24,530 --> 00:11:27,000
‫a quando tutto questo codice, e in questo

198
00:11:27,000 --> 00:11:29,340
‫caso, fino a quando tutta questa elaborazione

199
00:11:29,340 --> 00:11:32,180
‫dell'immagine non sarà terminata, e solo allora passeremo alla

200
00:11:32,180 --> 00:11:34,290
‫riga successiva, che sta chiamando il

201
00:11:34,290 --> 00:11:37,000
‫prossimo middleware per aggiornare davvero i documenti del tour.

202
00:11:37,000 --> 00:11:38,960
‫E se non lo

203
00:11:38,960 --> 00:11:41,020
‫facessimo in questo caso, non

204
00:11:41,020 --> 00:11:44,090
‫funzionerebbe affatto, perché senza questa spinta qui,

205
00:11:44,090 --> 00:11:48,260
‫la richiesta. corpo. le immagini sarebbero ancora vuote

206
00:11:48,260 --> 00:11:49,460
‫quando chiamiamo next.

207
00:11:49,460 --> 00:11:51,880
‫E quindi, nessuno di questi

208
00:11:51,880 --> 00:11:55,260
‫nomi di immagine sarebbe stato mantenuto nel documento, ok?

209
00:11:55,260 --> 00:11:57,630
‫Quindi ora usiamo la promessa. tutto, e

210
00:11:57,630 --> 00:12:02,250
‫in realtà non sto nemmeno salvando questo array qui su nessuna

211
00:12:02,250 --> 00:12:06,340
‫variabile, invece userò promise. tutto subito su

212
00:12:06,340 --> 00:12:07,913
‫questo.

213
00:12:09,030 --> 00:12:14,030
‫Quindi aspetta Promessa. tutto sull'array di

214
00:12:15,010 --> 00:12:17,963
‫ritorno da questo, ok?

215
00:12:19,870 --> 00:12:21,906
‫Quindi spero che abbia avuto senso.

216
00:12:21,906 --> 00:12:25,093
‫Quindi ora registriamo il corpo qui sulla console.

217
00:12:28,390 --> 00:12:32,190
‫Va bene, quindi con questo dovremmo essere pronti

218
00:12:32,190 --> 00:12:35,560
‫per caricare tutte le nostre immagini, ok?

219
00:12:35,560 --> 00:12:40,560
‫Scendiamo qui e riproviamo.

220
00:12:44,290 --> 00:12:46,903
‫Va bene, allora dov'è il nostro array di immagini?

221
00:12:54,440 --> 00:12:57,800
‫Beh, forse era da qualche parte quassù, ah, eccolo qui.

222
00:12:57,800 --> 00:12:59,660
‫Quindi in qualche modo me lo sono perso.

223
00:12:59,660 --> 00:13:03,300
‫E questo sembra molto promettente, giusto?

224
00:13:03,300 --> 00:13:05,730
‫Quindi tre belle immagini,

225
00:13:05,730 --> 00:13:08,693
‫ora diamo un'occhiata qui alla nostra pagina.

226
00:13:10,910 --> 00:13:15,910
‫Ah, ci sono, ma non del tutto corretti, giusto?

227
00:13:15,980 --> 00:13:18,540
‫Quindi sembra che abbiamo semplicemente caricato

228
00:13:18,540 --> 00:13:20,943
‫l'immagine di copertina tre volte.

229
00:13:22,050 --> 00:13:24,710
‫Quindi diamo un'occhiata a Postman, ma i

230
00:13:24,710 --> 00:13:26,840
‫nomi delle immagini sono effettivamente

231
00:13:26,840 --> 00:13:29,963
‫corretti, quindi c'è qualcosa di sbagliato nella nostra elaborazione.

232
00:13:32,470 --> 00:13:37,050
‫Diamo un'occhiata anche alle richieste. corpo, oh, e ho dimenticato

233
00:13:37,050 --> 00:13:39,243
‫di metterlo qui.

234
00:13:41,820 --> 00:13:44,220
‫Ok, ma penso che non sia nemmeno necessario perché

235
00:13:44,220 --> 00:13:45,700
‫abbiamo appena visto in Postman

236
00:13:45,700 --> 00:13:47,763
‫che i nomi dei file sono effettivamente corretti.

237
00:13:48,630 --> 00:13:50,630
‫Quindi non abbiamo più bisogno di questo.

238
00:13:50,630 --> 00:13:53,150
‫Ora diamo solo un'occhiata ai nomi dei

239
00:13:53,150 --> 00:13:58,150
‫file che abbiamo appena caricato, in modo che siano in pubblico e in tour.

240
00:14:00,570 --> 00:14:01,673
‫E quindi eccoli qui.

241
00:14:04,120 --> 00:14:07,763
‫Quindi questo è stato probabilmente il primo dell'ultimo test.

242
00:14:10,980 --> 00:14:13,860
‫E quindi, come vedi, sono tutti, in

243
00:14:13,860 --> 00:14:15,920
‫effetti, la stessa identica immagine.

244
00:14:15,920 --> 00:14:20,720
‫Quindi copertina, uno, due e tre sono le stesse immagini,

245
00:14:20,720 --> 00:14:23,760
‫e quindi non è corretto.

246
00:14:23,760 --> 00:14:27,500
‫E posso vedere in realtà subito qual è il problema.

247
00:14:27,500 --> 00:14:30,980
‫Quindi vedi che stiamo effettivamente leggendo, ancora,

248
00:14:30,980 --> 00:14:33,950
‫richiesta. File. imageCover e

249
00:14:33,950 --> 00:14:37,533
‫non il file dell'iterazione corrente di questo ciclo.

250
00:14:39,090 --> 00:14:43,107
‫Ok, quindi dovrebbe essere file. respingente.

251
00:14:45,930 --> 00:14:48,210
‫Va bene, quindi andiamo avanti

252
00:14:48,210 --> 00:14:50,073
‫ed eliminiamo tutti questi.

253
00:14:54,440 --> 00:14:57,253
‫Va bene, e riprova ora.

254
00:14:59,490 --> 00:15:00,653
‫Quindi mandiamolo.

255
00:15:03,220 --> 00:15:05,633
‫I nomi sembrano ancora

256
00:15:06,810 --> 00:15:10,310
‫corretti, ma ora quando ricarichiamo questo, vediamo.

257
00:15:10,310 --> 00:15:12,680
‫Ah, sembra corretto.

258
00:15:12,680 --> 00:15:14,260
‫Bello bello.

259
00:15:14,260 --> 00:15:17,120
‫Vedete, le immagini sono tutte ben formattate,

260
00:15:17,120 --> 00:15:19,480
‫anche questa che era, ricordate, in

261
00:15:19,480 --> 00:15:21,720
‫verticale e nemmeno in orizzontale,

262
00:15:21,720 --> 00:15:24,913
‫ma in pratica l'abbiamo ritagliata e sembra ancora bella.

263
00:15:26,300 --> 00:15:29,473
‫Ok, ora possiamo confermarlo, in modo

264
00:15:31,000 --> 00:15:34,993
‫che sia effettivamente tra 2.000 per 1.333 pixel.

265
00:15:37,220 --> 00:15:40,880
‫Va bene, è ancora un po' troppo grande qui, quindi

266
00:15:40,880 --> 00:15:44,360
‫forse potremmo ridurre un po' di più la qualità, ma

267
00:15:44,360 --> 00:15:46,280
‫non è molto importante.

268
00:15:46,280 --> 00:15:47,943
‫Ciò che conta davvero qui

269
00:15:47,943 --> 00:15:51,350
‫è che la logica che abbiamo appena applicato qui funziona davvero.

270
00:15:51,350 --> 00:15:55,233
‫Quindi, solo per ricapitolare rapidamente ciò che abbiamo fatto in queste due lezioni.

271
00:15:56,820 --> 00:16:00,920
‫Quindi abbiamo creato un caricamento multiplo utilizzando la memoria di archiviazione e

272
00:16:00,920 --> 00:16:03,183
‫questo filtro solo per le immagini.

273
00:16:04,330 --> 00:16:07,370
‫Quindi abbiamo creato il middleware dell'immagine del tour

274
00:16:07,370 --> 00:16:11,490
‫di caricamento utilizzando upload. field, che prende una

275
00:16:11,490 --> 00:16:14,570
‫copertina e tre immagini, e poi su

276
00:16:14,570 --> 00:16:19,020
‫richiesta metterà le proprietà dei file in questo modo, va bene?

277
00:16:19,020 --> 00:16:22,600
‫Quindi nel nostro prossimo middleware ridimensioniamo queste immagini, e

278
00:16:22,600 --> 00:16:24,170
‫prima l'immagine di

279
00:16:24,170 --> 00:16:27,090
‫copertina e poi le restanti tre immagini.

280
00:16:27,090 --> 00:16:28,930
‫E ciò che è veramente importante notare qui

281
00:16:28,930 --> 00:16:33,380
‫è come mettiamo i nomi dei file di immagine su richiesta. corpo.

282
00:16:33,380 --> 00:16:35,620
‫E lo facciamo in modo che

283
00:16:35,620 --> 00:16:37,570
‫nel prossimo middleware, che è

284
00:16:37,570 --> 00:16:40,230
‫il vero gestore del percorso, inserirà quei dati

285
00:16:40,230 --> 00:16:42,620
‫nel nuovo documento quando lo aggiornerà, ok?

286
00:16:42,620 --> 00:16:44,700
‫Quindi lo facciamo con la copertina dell'immagine

287
00:16:44,700 --> 00:16:46,940
‫e lo facciamo anche con le immagini

288
00:16:46,940 --> 00:16:50,120
‫rimanenti spingendola nel corpo. images, che come

289
00:16:50,120 --> 00:16:52,510
‫sappiamo dal nostro schema di

290
00:16:52,510 --> 00:16:54,920
‫tour, prevede un array di stringhe.

291
00:16:54,920 --> 00:16:57,290
‫E quindi, in questo caso, i nomi dei file.

292
00:16:57,290 --> 00:16:58,980
‫Quindi su queste altre immagini, le

293
00:16:58,980 --> 00:17:03,490
‫abbiamo avute su richiesta. File. images, quindi è un

294
00:17:03,490 --> 00:17:07,150
‫array e quindi ovviamente lo eseguiamo in loop usando map.

295
00:17:07,150 --> 00:17:10,130
‫E usiamo map in modo da poter sostanzialmente

296
00:17:10,130 --> 00:17:12,680
‫salvare le tre promesse che sono

297
00:17:12,680 --> 00:17:15,710
‫il risultato di queste tre funzioni asincrone qui,

298
00:17:15,710 --> 00:17:17,920
‫quindi possiamo quindi aspettarle tutte

299
00:17:17,920 --> 00:17:20,860
‫qui usando Promise. tutto ok?

300
00:17:20,860 --> 00:17:23,680
‫E solo dopo si passa

301
00:17:23,680 --> 00:17:26,950
‫all'effettivo gestore degli aggiornamenti del tour, ok?

302
00:17:26,950 --> 00:17:28,670
‫E questa parte è

303
00:17:28,670 --> 00:17:30,650
‫davvero importante, quindi è importante passare

304
00:17:30,650 --> 00:17:33,620
‫al middleware successivo non appena questa parte qui

305
00:17:33,620 --> 00:17:34,940
‫è davvero completata.

306
00:17:34,940 --> 00:17:38,940
‫Perché altrimenti, chiedi. corpo. le immagini saranno

307
00:17:38,940 --> 00:17:42,030
‫vuote e ovviamente i nostri nomi di file non verranno

308
00:17:42,030 --> 00:17:44,633
‫salvati nel documento del tour corrente, va bene?

309
00:17:45,580 --> 00:17:47,710
‫E questo in realtà conclude

310
00:17:47,710 --> 00:17:51,450
‫la parte di caricamento dell'immagine o del file di questa sezione.

311
00:17:51,450 --> 00:17:53,290
‫Quindi spero che sia stato

312
00:17:53,290 --> 00:17:55,850
‫divertente, so che per me è stato davvero bello.

313
00:17:55,850 --> 00:17:58,130
‫Quindi mi piacciono molto questo

314
00:17:58,130 --> 00:18:02,570
‫genere di cose, che fanno sembrare le mie applicazioni un mondo reale.

315
00:18:02,570 --> 00:18:04,470
‫Comunque, spero che ti sia piaciuto,

316
00:18:04,470 --> 00:18:06,163
‫e ci vediamo al prossimo.