1
00:00:01,290 --> 00:00:03,840
‫Conférencier : permettons maintenant aux

2
00:00:03,840 --> 00:00:07,883
‫utilisateurs de télécharger leurs photos directement sur notre site Web.

3
00:00:09,610 --> 00:00:11,640
‫Et c'est donc ce que nous voulons.

4
00:00:11,640 --> 00:00:13,760
‫Lorsque nous cliquons ici, nous voulons essentiellement

5
00:00:13,760 --> 00:00:15,915
‫ouvrir une nouvelle fenêtre pour laquelle nous

6
00:00:15,915 --> 00:00:19,370
‫pouvons sélectionner une nouvelle image à télécharger, puis lorsque nous cliquons

7
00:00:19,370 --> 00:00:21,380
‫sur ce bouton et soumettons

8
00:00:21,380 --> 00:00:23,990
‫un formulaire bien sûr, nous voulons télécharger cette

9
00:00:23,990 --> 00:00:27,520
‫image dans notre backend et mettre à jour l'utilisateur , à droite.

10
00:00:27,520 --> 00:00:29,528
‫Et donc la première étape

11
00:00:29,528 --> 00:00:33,400
‫pour le faire sera d'ajouter un nouvel élément d'entrée à notre html.

12
00:00:33,400 --> 00:00:35,490
‫Donc, en gros, à notre modèle de pack

13
00:00:35,490 --> 00:00:37,850
‫qui permettra ensuite à ce sélecteur de fichier de

14
00:00:37,850 --> 00:00:39,503
‫s'ouvrir lorsque nous cliquons ici.

15
00:00:40,930 --> 00:00:43,800
‫Alors, allons à nos vues et

16
00:00:43,800 --> 00:00:48,800
‫à nos comptes et c'est donc ce formulaire où nous

17
00:00:49,010 --> 00:00:51,720
‫devons maintenant ajouter cette entrée.

18
00:00:51,720 --> 00:00:55,420
‫Donc maintenant, nous avons ce lien ici qui dit nouvelle photo.

19
00:00:55,420 --> 00:00:58,800
‫Mais bien sûr, ce n'est pas un lien que nous allons utiliser.

20
00:00:58,800 --> 00:01:01,280
‫Donc, c'était vraiment juste un espace réservé.

21
00:01:01,280 --> 00:01:03,360
‫Et donc débarrassons-nous en.

22
00:01:03,360 --> 00:01:05,063
‫Donc, ce dont nous avons besoin, c'est d'une entrée.

23
00:01:06,280 --> 00:01:07,803
‫Désactivé pour saisir le fichier.

24
00:01:09,955 --> 00:01:13,110
‫Très bien, donc avant, pour le nom, nous

25
00:01:13,110 --> 00:01:15,980
‫avions une entrée avec le type texte.

26
00:01:15,980 --> 00:01:19,040
‫Nous avons également une entrée avec le type d'e-mail

27
00:01:19,040 --> 00:01:22,925
‫et il y en a aussi un spécial pour le mot de passe.

28
00:01:22,925 --> 00:01:26,210
‫Donc saisie pour le mot de passe et donc

29
00:01:26,210 --> 00:01:30,283
‫pour les fichiers, il y en a bien sûr un pour les fichiers.

30
00:01:31,380 --> 00:01:35,263
‫Nous pouvons alors spécifier quel type de fichier nous acceptons réellement.

31
00:01:38,920 --> 00:01:40,950
‫Et nous pouvons faire quelque chose comme ça.

32
00:01:40,950 --> 00:01:43,410
‫Image et puis tous.

33
00:01:43,410 --> 00:01:46,210
‫Donc, fondamentalement, tous les formats ont leurs images,

34
00:01:46,210 --> 00:01:49,010
‫donc ceux qui ont un type d'esprit commençant

35
00:01:49,010 --> 00:01:50,823
‫par image sont acceptés ici.

36
00:01:53,054 --> 00:01:55,780
‫Maintenant, donnons également ici un nom

37
00:01:55,780 --> 00:01:59,930
‫de classe afin qu'il apparaisse bien formaté sur notre page.

38
00:01:59,930 --> 00:02:03,660
‫Et c'est donc le nom de la classe que j'ai dans mon css.

39
00:02:03,660 --> 00:02:06,940
‫Et maintenant aussi en lui donnant un ID afin que nous puissions ensuite le

40
00:02:06,940 --> 00:02:08,440
‫sélectionner dans un script java.

41
00:02:09,300 --> 00:02:12,690
‫Ajoutez cela comme photo et enfin, tout comme les

42
00:02:12,690 --> 00:02:15,840
‫autres champs, nous lui donnons également un nom.

43
00:02:15,840 --> 00:02:20,420
‫Donc nom de la photo aussi.

44
00:02:20,420 --> 00:02:23,093
‫Et bien sûr c'est photo car c'est le

45
00:02:23,093 --> 00:02:25,680
‫nom que nous avons dans notre document

46
00:02:25,680 --> 00:02:29,063
‫utilisateur et c'est aussi le nom du champ que multer attend.

47
00:02:30,106 --> 00:02:34,410
‫C'est donc ici un téléchargement, puis nous spécifions également une étiquette

48
00:02:34,410 --> 00:02:35,483
‫pour cela.

49
00:02:37,650 --> 00:02:40,293
‫Et nous l'avons mis

50
00:02:40,293 --> 00:02:44,110
‫à quatre, puis l'ID de l'élément d'entrée, d'accord.

51
00:02:44,110 --> 00:02:45,570
‫Je ne sais donc pas

52
00:02:45,570 --> 00:02:47,890
‫si vous savez comment cela fonctionne en html, mais

53
00:02:47,890 --> 00:02:49,640
‫ce n'est pas non plus très important.

54
00:02:51,329 --> 00:02:53,600
‫Donc, la façon dont cela se produit est

55
00:02:53,600 --> 00:02:56,320
‫que lorsque nous cliquons sur cette étiquette ici, cela activera

56
00:02:56,320 --> 00:02:58,610
‫alors l'élément d'entrée qui a l'ID que nous

57
00:02:58,610 --> 00:03:00,500
‫spécifions ici dans le formulaire.

58
00:03:00,500 --> 00:03:03,870
‫Et donc dans ce cas c'est la photo, d'accord.

59
00:03:03,870 --> 00:03:05,343
‫Et en fait

60
00:03:05,343 --> 00:03:09,403
‫c'est cette étiquette ici qui fera choisir au texte la nouvelle photo.

61
00:03:11,030 --> 00:03:12,950
‫Et donc, lorsque nous cliquons ensuite sur

62
00:03:12,950 --> 00:03:14,597
‫l'étiquette, cela activera cette entrée

63
00:03:14,597 --> 00:03:16,830
‫qui à son tour ouvrira la fenêtre à

64
00:03:16,830 --> 00:03:18,913
‫partir de laquelle nous pourrons sélectionner un fichier.

65
00:03:20,060 --> 00:03:23,090
‫Et c'est tout ce que nous devons faire pour l'entrée ici.

66
00:03:23,090 --> 00:03:26,290
‫Maintenant, comme avant, il existe deux manières possibles

67
00:03:26,290 --> 00:03:28,710
‫d'envoyer ces données au serveur.

68
00:03:28,710 --> 00:03:31,480
‫Donc d'abord, sans l'API comme nous l'avons fait dans

69
00:03:31,480 --> 00:03:32,840
‫une conférence précédente.

70
00:03:32,840 --> 00:03:35,470
‫On trouve déjà l'action que l'on veut

71
00:03:35,470 --> 00:03:37,370
‫entreprendre et aussi la méthode.

72
00:03:37,370 --> 00:03:38,760
‫Et avec cela, les

73
00:03:38,760 --> 00:03:41,180
‫données sont ensuite directement envoyées au serveur.

74
00:03:41,180 --> 00:03:43,130
‫Maintenant, si nous voulions envoyer un

75
00:03:43,130 --> 00:03:45,440
‫fichier en utilisant cette méthode, nous devrons alors

76
00:03:45,440 --> 00:03:47,220
‫spécifier une autre option ici.

77
00:03:47,220 --> 00:03:49,801
‫Et c'est le type enc.

78
00:03:49,801 --> 00:03:54,520
‫Donc, le type enc devrait être des données de formulaire en plusieurs parties.

79
00:03:54,520 --> 00:03:59,520
‫Donc, les données sous forme de barre oblique en plusieurs parties, d'accord.

80
00:04:02,530 --> 00:04:06,090
‫Et donc là encore, nous avons ce nom en plusieurs parties.

81
00:04:06,090 --> 00:04:07,948
‫Et comme nous l'avons dit

82
00:04:07,948 --> 00:04:11,220
‫précédemment, le multi-parties sert toujours à envoyer des fichiers au serveur.

83
00:04:11,220 --> 00:04:13,864
‫Et encore une fois, nous avons en fait besoin

84
00:04:13,864 --> 00:04:17,164
‫du middleware multer pour gérer ces données de formulaire en plusieurs parties, d'accord.

85
00:04:17,164 --> 00:04:20,650
‫Et en fait, le nom multer vient de multi-part.

86
00:04:20,650 --> 00:04:23,317
‫Alors multer, multer, d'accord.

87
00:04:23,317 --> 00:04:26,830
‫Quoi qu'il en soit, encore une fois, si nous voulions

88
00:04:26,830 --> 00:04:29,320
‫envoyer les données sans API, nous devions

89
00:04:29,320 --> 00:04:31,200
‫toujours spécifier ce type d'enc.

90
00:04:31,200 --> 00:04:33,740
‫Sinon, le formulaire ignorerait simplement le fichier

91
00:04:33,740 --> 00:04:35,623
‫et ne l'enverrait pas, d'accord.

92
00:04:35,623 --> 00:04:38,370
‫Mais comme nous le savons

93
00:04:38,370 --> 00:04:41,780
‫déjà, nous l'utilisons avec l'API, n'est-ce pas.

94
00:04:41,780 --> 00:04:44,727
‫Et donc nous n'avons pas besoin de spécifier ce

95
00:04:44,727 --> 00:04:48,630
‫type d'enc, mais nous devrons en quelque sorte le faire par programme.

96
00:04:48,630 --> 00:04:51,382
‫Et donc faisons-le réellement.

97
00:04:51,382 --> 00:04:54,180
‫Envoyons donc maintenant nos données, y compris bien

98
00:04:54,180 --> 00:04:56,920
‫sûr la photo en faisant un appel

99
00:04:56,920 --> 00:04:59,970
‫API comme nous l'avons fait dans la dernière section.

100
00:04:59,970 --> 00:05:04,100
‫Et donc nous devons maintenant ouvrir dans notre dossier public et à

101
00:05:04,100 --> 00:05:08,973
‫partir de leur js, nous ouvrons index. js.

102
00:05:10,360 --> 00:05:13,560
‫Et c'est donc ici que nous envoyons réellement

103
00:05:13,560 --> 00:05:17,010
‫les données à mettre à jour sur le serveur.

104
00:05:17,010 --> 00:05:19,260
‫Eh bien, nous ne les envoyons

105
00:05:19,260 --> 00:05:21,960
‫pas vraiment ici, mais nous les sélectionnons dans le

106
00:05:21,960 --> 00:05:24,790
‫formulaire, puis les transmettons aux paramètres de mise à jour.

107
00:05:24,790 --> 00:05:27,260
‫D'accord, mais maintenant, rappelez-vous comment j'ai dit que

108
00:05:27,260 --> 00:05:29,590
‫nous devions en quelque sorte recréer

109
00:05:29,590 --> 00:05:32,660
‫par programme les données d'un formulaire en plusieurs parties ?

110
00:05:32,660 --> 00:05:34,893
‫Et donc nous devons le faire comme ça.

111
00:05:42,020 --> 00:05:46,740
‫Appelons-le formulaire, puis nouvelles données de formulaire.

112
00:05:48,580 --> 00:05:51,200
‫Très bien, et maintenant sur ce formulaire,

113
00:05:51,200 --> 00:05:53,883
‫nous devons continuer à ajouter de nouvelles données.

114
00:05:53,883 --> 00:05:57,152
‫Et fondamentalement, un ajout pour chacune des données

115
00:05:57,152 --> 00:05:59,143
‫que nous voulons envoyer.

116
00:06:00,370 --> 00:06:04,400
‫Alors forme. ajouter et le premier est le nom.

117
00:06:04,400 --> 00:06:08,250
‫Nous spécifions donc ici le nom, puis la valeur du nom.

118
00:06:08,250 --> 00:06:11,000
‫Et c'est donc bien sûr celui-ci.

119
00:06:11,000 --> 00:06:15,363
‫Alors saisissons-le, collez-le ici et dupliquez-le.

120
00:06:16,870 --> 00:06:19,653
‫Et la prochaine étape est l'e-mail, d'accord.

121
00:06:20,690 --> 00:06:24,580
‫Alors débarrassons-nous de cette entrée dans les paramètres de mise à jour.

122
00:06:24,580 --> 00:06:28,040
‫On passe ensuite le formulaire, d'accord.

123
00:06:28,040 --> 00:06:30,560
‫Et ou un appel de texte utilisant

124
00:06:30,560 --> 00:06:32,350
‫axios reconnaîtra alors cette

125
00:06:32,350 --> 00:06:34,480
‫forme ici comme un objet

126
00:06:34,480 --> 00:06:37,550
‫et fonctionnera exactement de la même manière qu'avant, d'accord.

127
00:06:37,550 --> 00:06:39,900
‫Donc, ici, dans les paramètres de mise

128
00:06:39,900 --> 00:06:42,178
‫à jour où nous transmettons

129
00:06:42,178 --> 00:06:44,980
‫les données, qui sont ensuite transmises ici dans

130
00:06:44,980 --> 00:06:47,543
‫la requête axios, nous n'avons rien à changer.

131
00:06:49,090 --> 00:06:51,810
‫Très bien, cela équivaut donc à ce que nous

132
00:06:51,810 --> 00:06:54,380
‫avions auparavant avec le nom et l'e-mail, mais maintenant,

133
00:06:54,380 --> 00:06:57,050
‫bien sûr, ajoutons également la photo qui est la

134
00:06:57,050 --> 00:06:59,380
‫seule raison pour laquelle nous devons maintenant le

135
00:06:59,380 --> 00:07:00,580
‫faire comme ça.

136
00:07:02,590 --> 00:07:07,590
‫Alors forme. ajouter à nouveau puis le nom que nous

137
00:07:07,650 --> 00:07:10,400
‫voulons lui donner est bien sûr à nouveau, photo

138
00:07:12,093 --> 00:07:12,970
‫puis document. getelementbyid qui

139
00:07:14,176 --> 00:07:17,860
‫est aussi une photo mais maintenant ce n'est pas le cas. valeur mais à la

140
00:07:20,530 --> 00:07:22,930
‫place. fichiers, d'accord.

141
00:07:22,930 --> 00:07:25,920
‫Et ces fichiers sont

142
00:07:25,920 --> 00:07:28,170
‫en fait dans un tableau et donc comme

143
00:07:28,170 --> 00:07:30,260
‫il n'y en a qu'un, nous devons

144
00:07:30,260 --> 00:07:33,260
‫sélectionner ce premier élément dans le tableau et c'est donc zéro.

145
00:07:33,260 --> 00:07:34,733
‫Très bien, et enregistrons

146
00:07:36,880 --> 00:07:40,810
‫ce formulaire sur la console jusqu'à ce que nous ayons un rapide aperçu de

147
00:07:40,810 --> 00:07:42,340
‫ce qu'est réellement ce formulaire.

148
00:07:43,360 --> 00:07:45,870
‫Mais en un mot, comme je l'ai déjà dit, nous

149
00:07:45,870 --> 00:07:48,280
‫recréons essentiellement ces données de formulaire en plusieurs parties.

150
00:07:48,280 --> 00:07:52,480
‫Et c'est en fait pourquoi on l'appelle données de formulaire parce que,

151
00:07:52,480 --> 00:07:55,200
‫eh bien, ces données de formulaire sont

152
00:07:55,200 --> 00:07:58,640
‫également ici dans ce type enc en plusieurs parties, d'accord.

153
00:07:58,640 --> 00:08:02,173
‫Donc, je suppose que cela est en fait suffisant pour

154
00:08:03,750 --> 00:08:06,450
‫que nous puissions maintenant essayer cela.

155
00:08:06,450 --> 00:08:08,670
‫Donc, comme je l'ai dit, dans les paramètres

156
00:08:08,670 --> 00:08:10,860
‫de mise à jour, nous n'avons rien à

157
00:08:10,860 --> 00:08:13,030
‫changer et également le point de

158
00:08:13,030 --> 00:08:15,320
‫terminaison de mise à jour où nous soumettons

159
00:08:15,320 --> 00:08:18,630
‫cet outil de demande, donc celui-ci fonctionne déjà et est prêt à

160
00:08:18,630 --> 00:08:21,040
‫accepter des images et même à les redimensionner, d'accord.

161
00:08:21,040 --> 00:08:25,230
‫Et donc allons-y maintenant et essayons ceci.

162
00:08:25,230 --> 00:08:28,319
‫Et donc rechargeons ceci une fois de plus.

163
00:08:28,319 --> 00:08:32,050
‫Et donc voyons, et en effet, nous

164
00:08:32,050 --> 00:08:36,031
‫obtenons maintenant notre sélecteur de fichiers en gros.

165
00:08:36,031 --> 00:08:38,450
‫Donc cette fenêtre où nous pouvons maintenant

166
00:08:38,450 --> 00:08:40,550
‫sélectionner le fichier et ce que

167
00:08:40,550 --> 00:08:42,370
‫je vais faire, c'est

168
00:08:42,370 --> 00:08:45,620
‫essentiellement remettre l'image originale que nous avions sur cet utilisateur.

169
00:08:45,620 --> 00:08:47,730
‫C'est donc sur le

170
00:08:47,730 --> 00:08:52,513
‫bureau, natours, public, les utilisateurs d'images, et c'était l'utilisateur 11, donc celui-ci.

171
00:08:54,060 --> 00:08:58,700
‫Et c'est maintenant téléchargé.

172
00:08:58,700 --> 00:09:00,050
‫Alors ouvrez, enregistrez dans les paramètres et la mise à jour des données est réussie.

173
00:09:01,940 --> 00:09:06,940
‫Maintenant, cela ne se reflète pas ici immédiatement.

174
00:09:07,780 --> 00:09:10,180
‫Ni ici ni là-haut, mais cela devrait

175
00:09:10,180 --> 00:09:13,280
‫être le cas une fois que nous avons téléchargé cette page.

176
00:09:13,280 --> 00:09:15,393
‫Et on pourrait effectivement le faire

177
00:09:16,410 --> 00:09:19,540
‫aussi avec java script mais c'est en fait beaucoup de travail.

178
00:09:19,540 --> 00:09:21,620
‫J'avais essayé de le faire et je l'ai

179
00:09:21,620 --> 00:09:23,740
‫fait, mais j'ai ensuite pensé que c'était trop de travail

180
00:09:23,740 --> 00:09:26,800
‫et que cela ne valait pas la peine de le mettre en œuvre ici.

181
00:09:26,800 --> 00:09:29,630
‫Mais de toute façon, juste pour tester si cela a

182
00:09:29,630 --> 00:09:32,040
‫réellement fonctionné, nous devons maintenant recharger la page.

183
00:09:32,040 --> 00:09:34,320
‫Et il l'a fait.

184
00:09:34,320 --> 00:09:35,840
‫Voici maintenant la nouvelle image que nous venons de télécharger.

185
00:09:35,840 --> 00:09:39,320
‫Tellement bon.

186
00:09:39,320 --> 00:09:41,450
‫Jetons un coup d'œil au dossier lui-même.

187
00:09:41,450 --> 00:09:44,210
‫S'il est bien là aussi, et

188
00:09:44,210 --> 00:09:46,530
‫s'il a été correctement transformé.

189
00:09:46,530 --> 00:09:48,810
‫C'est donc une image.

190
00:09:48,810 --> 00:09:52,030
‫Rechargeons-le ici.

191
00:09:52,030 --> 00:09:53,293
‫Et maintenant je ne sais plus lequel c'est.

192
00:09:57,240 --> 00:09:59,663
‫Ah, exactement.

193
00:10:00,890 --> 00:10:02,690
‫Donc 500 fois 500

194
00:10:02,690 --> 00:10:07,200
‫et maintenant c'est complètement flou car l'image originale était beaucoup plus petite.

195
00:10:07,200 --> 00:10:10,440
‫Mais peu importe, cela n'a pas d'importance du tout.

196
00:10:10,440 --> 00:10:12,643
‫Ce qui compte, c'est que nous

197
00:10:13,910 --> 00:10:17,570
‫pouvons maintenant télécharger des photos directement à partir de ce formulaire.

198
00:10:17,570 --> 00:10:19,830
‫Je veux que c'est tout pour jeter

199
00:10:19,830 --> 00:10:22,480
‫un œil à notre console ici à ces données

200
00:10:22,480 --> 00:10:27,480
‫de formulaire que je pensais que nous avions enregistrées et qui n'apparaissaient pas ici car nous

201
00:10:27,546 --> 00:10:29,530
‫avons déjà rechargé la page.

202
00:10:29,530 --> 00:10:32,184
‫Mais de toute façon, je voulais remettre l'autre image ici.

203
00:10:32,184 --> 00:10:36,543
‫Donc, celui que nous avons téléchargé avant est en

204
00:10:39,290 --> 00:10:41,820
‫dev-data, image et aarav.

205
00:10:41,820 --> 00:10:46,820
‫Très bien, les données ont été mises à jour avec succès.

206
00:10:50,040 --> 00:10:53,340
‫Jetons rapidement un coup d'œil à nos données téléphoniques ici.

207
00:10:53,340 --> 00:10:56,760
‫Ah, mais je suppose que nous ne pouvons pas vraiment voir ce que nous avons ici.

208
00:10:56,760 --> 00:11:00,173
‫Voyons voir.

209
00:11:01,100 --> 00:11:02,223
‫Non, nous ne pouvons pas vraiment voir ce que nous avons.

210
00:11:04,045 --> 00:11:06,689
‫D'accord, donc je n'ai jamais jeté un œil à ça.

211
00:11:06,689 --> 00:11:09,160
‫Et j'ai pensé que nous pourrions peut-être voir l'information

212
00:11:09,160 --> 00:11:10,110
‫mais tant pis.

213
00:11:10,110 --> 00:11:12,850
‫Ce qui compte, c'est que cela a réellement fonctionné.

214
00:11:12,850 --> 00:11:16,170
‫Donc, si nous rechargeons maintenant, alors bien sûr cette

215
00:11:16,170 --> 00:11:18,191
‫ancienne image est de retour.

216
00:11:18,191 --> 00:11:21,940
‫Génial, donc encore une fois, cette application commence vraiment à ressembler

217
00:11:21,940 --> 00:11:25,000
‫de plus en plus à un vrai travail.