Vue JS和穆特

时间:2018-07-29 23:39:14

标签: express vue.js multer

    <template>
      <v-app id="inspire" dark >
       <v-layout v-for = "post in posts" :key = "post.id">
         <v-flex xs3>
           <v-card >
             <v-card-media>
                <img 
       :src = "post.postImage">
             </v-card-media>
             <v-card-title>
               {{post.description}}
             </v-card-title>
           </v-card>
         </v-flex>
       </v-layout>
      </v-app>
    </template>
<script>
import PostService from '@/service/PostService'
export default {
  data(){
    return {
      posts: []
    }
  },
  mounted (){
      this.getPosts()
    },
  methods: {
    async  getPosts() {
      const response = await PostService.fetchPosts()
      this.posts = response.data.posts
    }
  }
}
</script>

    const multer = require('multer');
    const Post = require('./models/post')
    const storage = multer.diskStorage({
        destination: (req, file, cb) => {
            cb(null, './uploads/');
        },
        filename: (req, file, cb ) => {
            cb(null, Date.now() + file.originalname); 
        }
    })

    const fileFilter = (req, file, cb) => {
        if(file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
            cb(null, true);
        }else {
            cb(null, false);
        }


    }
    const upload = multer({
        storage: storage, 
        fileFilter,
        limits: {
        fileSize: 1024 * 1024 * 5
    }
    });

app.get('/posts', (req, res) => {
Post.find({},'postImage description', (error, posts) => {
    if(error) {
        console.log(error)
    }
    res.send({
        posts
    })
}).sort({_id: -1})

})

大家好,我打算在前端使用multer显示图像。但它只显示imagelink或图像目标,但是我已经在后端添加了一些图像。因此,如何使用vue动态地将图像显示到前端。我确实对数据库中的每个数据使用v-for。我应该在v卡媒体中输入什么以动态获取图像。

0 个答案:

没有答案