Intégration de photo

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:

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:

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..