inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

Vue로 Nodebird SNS 만들기

5-4. 이미지 저장하기

프론트로 이미지가 넘어오지가 않습니다

175

문종현

작성한 질문수 28

0

안녕하세요 제로초님

5-4강좌를 다 듣고 진행중에 있는데 이미지가 업로드 되지가 않습니다 ㅜ

무슨 다른 에러는 하나도 뜨는게 없는데

네트워크 탭에 보면 Images가 비어있습니다.

router.post('/images', isLoggedIn, upload.array('image'), (req, res) => {
  console.log(req.files)
  return res.json(req.files.map(v => v.filename))
})

router.post('/', isLoggedIn, async (req, res, next) => {
  try {
    const hashtags = req.body.content.match(/#[^\s#]+/g)
    const newPost = await db.Post.create({
      content: req.body.content,
      UserId: req.user.id
    })
    if (hashtags) {
      const result = await Promise.all(hashtags.map(tag => db.Hashtag.findOrCreate({
        where: { name: tag.slice(1).toLowerCase() }
      })))
      await newPost.addHashtags(result.map(r => r[0]))
    }
    if (req.body.image) {
      if (Array.isArray(req.body.image)) {
        await Promise.all(req.body.image.map((image) => {
          return db.Image.create({ src: image, PostId: newPost.id })
        }))
      } else {
        await db.Image.create({ src: req.body.image, PostId: newPost.id})
      }
    }
    const fullPost = await db.Post.findOne({
      where: { id: newPost.id },
      include: [{
        model: db.User,
        attributes: ['id', 'nickname']
      }, {
        model: db.Image
      }]
    })
    return res.json(fullPost)
  } catch (err) {
    console.error(err)
    next(err)
  }
})

그런데 라우터 보시면 model : db.Image를 제대로 넣어놨는데 왜 안돼는지 모르겠습니다

아예 이미지를 서버로 전송 안해주나 생각해서 프론트도 봤는데 제로초님과 다른 코드는 발견하지 못했습니다 ㅜㅜ

무엇이 문제인지 피드백 받을 수 있을까요??

 

front/store/posts.js 의 액션

uploadImages({commit}, payload) {
    this.$axios.post('http://localhost:3085/post/images', payload, {
      withCredentials: true
    })
    .then((res) => {
      commit('concatImagePaths', res.data)
    })
    .catch((err) => {
      console.error(err)
  })

front/store/posts.js 의 뮤테이션

concatImagePaths(state, payload) {
    state.imagePath = state.imagePath.concat(payload)
},

front/components/postcard

<template>
<div>
  <v-card style="margin-bottom: 20px">
    <post-images :images="post.Images || []" />

PostImages 잘연결 해놨습니다

 

무엇이 문제일까요 ㅜ

mysql aws vuejs nodejs vuex ssr

답변 1

0

제로초(조현영)

항상 코드만 보지 마시고 실제 디비를 봐보세요. 실제 디비에 이미지 데이터가 제대로 저장되어 있나요?

0

문종현

예 알겠습니다

방금 워크브렌치 확인해봤는데 없네요 비어있습니다 ㅜ 왜그런걸까요!!ㅜ

0

제로초(조현영)

데이터를 넣는 쪽에서부터 잘못된거겠죠

0

문종현

예 그래서 한번 찾아보고있긴한데

back/models/image.js

module.exports = (sequelize, DataTypes) => {
  const Image = sequelize.define('Image', {
    src: {
      type: DataTypes.STRING(200),
      allowNull: false
    }
  }, {
    charset: 'utf8',
    collate: 'utf8_general_ci'
  })
  Image.associate = (db) => {
    db.Image.belongsTo(db.Post)
  }
  return Image;
}

 

back/models/post.js

module.exports = (sequelize, DataTypes) => {
  const Post = sequelize.define('Post', {
    content: {
      type: DataTypes.TEXT,
      allowNull: false
    }
  }, {
    charset: 'utf8mb4',
    collate: 'utf8mb4_general_ci'
  })
  Post.associate = (db) => {
    db.Post.belongsTo(db.User) // UserId
    db.Post.hasMany(db.Comment)
    db.Post.hasMany(db.Image)
    db.Post.belongsToMany(db.Hashtag, { through : 'PostHashtag' })
  }
  return Post;
}

보면 잘 설정하고 관계도 잘 해놓은거 같은데 ㅜ 

그리고 라우트 쪽에도

routes/post.js

router.post('/images', isLoggedIn, upload.array('image'), (req, res) => {
  console.log(req.files)
  return res.json(req.files.map(v => v.filename))
})

router.post('/', isLoggedIn, async (req, res, next) => {
  try {
    const hashtags = req.body.content.match(/#[^\s#]+/g)
    const newPost = await db.Post.create({
      content: req.body.content,
      UserId: req.user.id
    })
    if (hashtags) {
      const result = await Promise.all(hashtags.map(tag => db.Hashtag.findOrCreate({
        where: { name: tag.slice(1).toLowerCase() }
      })))
      await newPost.addHashtags(result.map(r => r[0]))
    }
    if (req.body.image) {
      if (Array.isArray(req.body.image)) {
        await Promise.all(req.body.image.map((image) => {
          return db.Image.create({ src: image, PostId: newPost.id })
        }))
      } else {
        await db.Image.create({ src: req.body.image, PostId: newPost.id})
      }
    }
    const fullPost = await db.Post.findOne({
      where: { id: newPost.id },
      include: [{
        model: db.User,
        attributes: ['id', 'nickname']
      }, {
        model: db.Image
      }]
    })
    return res.json(fullPost)
  } catch (err) {
    console.error(err)
    next(err)
  }
})

이거 보시면 model: db.Image 설정도 잘 해놨는데 제로초님은 무엇이 문제인지 확인 가능할까요??

 

 

0

문종현

아 제로초님!! 해결했습니다 store부분에서 변수를 잘못 설정하여 안보내진거였습니다!!ㅜㅜ

npm run dev 할 때 에러가 발생합니다.

0

156

1

해당 강의는 리뉴얼 예정은 따로 없나요?

0

341

1

강의는 언제까지 업데이트 된 내용인가요?

0

339

2

실습 환경 문의(Node 버전)

0

376

1

로그인 새로고침시 풀림

0

304

1

안녕하세요! 로그인 유지 질문 드립니다!

0

413

1

웹 서버 관련해서 질문드립니다.

0

450

1

버전때매 질문 드립니다!!

0

319

1

이 강의는 vue3는 아닌가요??

0

380

1

vsCode에 관한 질문입니다

0

495

1

v.trim()이 타입에러가 뜹니다...

0

348

1

express.static('uploads')

0

351

2

STRING이 인식이 안되는데 이유알수있을까요?

0

455

2

<v-lsit-item-title> 에러

0

416

2

vue cli 를 실무에서도 사용하지 않으시나요?

0

326

1

선생님 처음 환경 셋팅 관련 문의드립니다.

0

392

1

nuxtServerInit 무한 로딩

0

986

3

Nginx Cookie 설정

0

736

2

상태가 204번인경우에는 어떻게 처리를 해야하나요?

0

301

1

선생님 nuxt 관련질문드립니다.

0

357

1

인덱스 비교로 삭제해도 될까요?

0

386

1

질문 드립니다!

0

335

2

안녕하세요

0

231

1

궁금한점이있습니다

0

241

1