J'essaie de créer une page pour afficher les images. L'aperçu est là, mais je souhaite l'enregistrer ou la poster directement sur une page, mais je n'y arrive pas... Quelqu'un peut-il m'aider ??
Merci d'avance,
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41 <template> <div v-if="!image"> <h2>Select an image</h2> <input type="file" @change="onFileChange"> <img :src="image" /><button id="newImage_btn" type="submit">Publier</button> </div> <div v-else> </div> </template> <script> export default { name: 'NewPost', data(){ return{ image: '' } }, methods: { onFileChange(e) { let files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.createImage(files[0]); }, createImage(file) { let reader = new FileReader(); let vm = this; reader.onload = (e) => { vm.image = e.target.result; }; reader.readAsDataURL(file); }, } } </script>
au niveau du backend
J'y suis depuis une semaine en essayant plein de chose, je n'y arrive plus..
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 exports.onFileChange = (req, res) => { //Declaration de l'url de l'image let attachmentURL then(user => { if (user !== null) { attachmentURL = `${req.protocol}://${req.get('host')}/images/${req.file.filename}`; if (attachmentURL == null) { res.status(400).json({ error: 'Rien à publier' }) } else { models.Post.create({ attachement: attachmentURL, }) .then((newPost) => {res.status(201).json(newPost)}) .catch((err) => {res.status(500).json(err)}) }; } else {res.status(400).json(error);} }) .catch(error => res.status(500).json(error)); }
Partager