인프런 커뮤니티 질문&답변

닉닉닉네임

작성한 질문수

Vue로 Nodebird SNS 만들기

4-15. 이미지 업로드와 FormData

질문 드립니다!

작성

·

304

0

안녕하세요! 질문드립니다!

강의를 듣고있는데 actions에서 서버에 요청을 보내고

이미지를 업로드하면 다음과 같은 에러가 나옵니다.

구글링을 해보니, 이벤트는 발생시켰는데 받을 이벤트가 없을 때 저렇게 나온다고 하는데 아무리 봐도 어디가 문제인지 모르겠습니다 ㅠㅠ 의심되는 코드는 이 부분입니다.

그 전에 이미지 업로드 버튼을 만들어서 콘솔로그를 했을때는 폼데이터로 로그가 떴었는데, 저 부분을 작성한 이후부터 에러가 발생합니다. 도와주세요 ㅠㅠ

aws vuex nodejs mysql vuejs ssr

답변 2

1

제로초(조현영)

지식공유자

this.$store이 undefined라는 걸 에러메시지를 보고 바로 캐치하셔야 합니다.

왜 this.$store이 Undefined냐면 this문제 때문이고 this문제는 function이 arrow가 아니라서겠죠?

이런 식으로 캐치하실 수 있어야 합니다.

0

닉닉닉네임

질문자

감사합니다! function이 arrow가 아니라는 말이 잘 이해가 안되는데 조금 더 설명해주실수있나요?!..

제로초(조현영)

지식공유자

onChangeImages: (e) => {

이런 형식이 화살표 함수입니다. 화살표 함수는 this가 다른 거 아시죠?

닉닉닉네임

질문자

아 그렇군요 ㅠㅠ 감사합니다 this가 비어있어서 그랬던것같네요.

그런데 지금 arrow함수로 바꿔보았는데 이번엔 $store에서 에러가 걸리는것같습니다.

아예 싹 지우고 다시 코드를 써보는게 맞을까요?

너무 답답해서 미칠뻔했는데.. 빠른 답변 정말 감사드립니다.

제로초(조현영)

지식공유자

코드 전체를 보여주세요. this가 undefined네요.

닉닉닉네임

질문자

감사합니다. 노드버드를 클론코딩해서 만들어보고 이번에 제가 웹페이지를 새로 짜보고 있는데 어딘가 잘못된것같습니다.

질문이 너무 많은데.. 감사합니다.

<template>
<div> 
  <v-container />
     <v-card style="width: 100%" dark color= "gold"> 
    <v-container>
    <v-header>이미지 비디오 업로더</v-header>
    <v-subheader></v-subheader>
    </v-container>
    <v-container>
    <v-form>
      
            
      
      <img src="~/assets/test.jpg" alt="btnImages" class="image">
      <img src="~/assets/test.jpg" alt="btnImages" class="image"><v-container/>

     <input type="file" ref="imageInput" @change="onChangeImages" multiple hidden>
     <v-btn dark color ="cyan"  @click ="onClickImageUpload" type="button" class="submit" >UPLOAD IMAGE</v-btn>
      <input type="file" ref="videoInput" @change="onChangeVideos" multiple hidden>
      <v-btn dark color ="cyan"  @click ="onClickVideoUpload" type="button" class="submit">UPLOAD VIDEO</v-btn>
     
   <v-container />
       <v-btn dark color ="purple" type="submit" class="submit2">변환</v-btn> 
    </v-form>
     
    </v-container>
    </v-card>
    <v-container/>
    <v-card style="width: 100%" dark color= "gold"> 
      <v-subheader>RESULT</v-subheader>
    
      <video controls width="800" class="result">



    <source src="~/assets/test01.mp4"
             class="com" type="video/mp4">

    
</video>
      <v-container/> <v-container/> <v-container/>
    </v-card>
  </div>
</template>
<script>
import { posts } from '~/store/posts.js'

export default {

  methods:{
    onClickImageUpload(){
        this.$refs.imageInput.click();
    },
    onChangeImages : (e)=>{
      console.log(e.target.files);
      const imageFormData = new FormData();
      [].forEach.call(e.target.files, (f) =>{
        imageFormData.append('image',f);
      });
      this.$store.dispatch('posts/uploadImages', imageFormData);
    },
    onClickVideoUpload(){
        this.$refs.videoInput.click();
    },
    onChangeVideos(e){
      console.log(e.target.files);
    }
  }
  }
</script>
<style scoped>
  .image{
   
    margin-left: 60px;
    margin-right : 30px;
    width: 300px;
    height:200px;
   

  }
  .submit{
      flex: 20px;
      margin-left: 140px;
    margin-right : 100px;  
      margin-bottom: 0px ;

      align-items: left;
     
  }
  .submit2{
      flex: 20px;
      margin-left: 350px;
    margin-right : 100px;  
      margin-bottom: 0px ;

      align-items: center;
     
  }
  .result
  {
      margin-left: 170px;
      margin-right : 100px;  
      margin-bottom: 0px ;
      width: 500px;
      height:400px;
   
      align-items: center;
  }
</style>

제로초(조현영)

지식공유자

지금 보니까 저 부분은 화살표 함수가 아니라 그냥 function이 맞습니다. 애초에 vuex가 제대로 연결 안 된 것 같은데요?

닉닉닉네임

작성한 질문수