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

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));
}
J'y suis depuis une semaine en essayant plein de chose, je n'y arrive plus..