inflearn logo
강의

Khóa học
Chia sẻ kiến thức

Tạo Nodebird SNS với Vue

4-15. Tải ảnh lên và FormData

질문 드립니다!

324

w223

2 câu hỏi đã được viết

0

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

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

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

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

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

aws vuex nodejs mysql vuejs ssr

Câu trả lời 2

1

zerocho

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

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

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

0

w223

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

0

zerocho

onChangeImages: (e) => { 

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

0

w223

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

 

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

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

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

0

zerocho

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

0

w223

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

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

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

0

zerocho

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

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

0

143

1

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

0

326

1

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

0

327

2

실습 환경 문의(Node 버전)

0

363

1

로그인 새로고침시 풀림

0

289

1

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

0

401

1

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

0

438

1

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

0

311

1

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

0

370

1

vsCode에 관한 질문입니다

0

484

1

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

0

341

1

express.static('uploads')

0

340

2

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

0

444

2

<v-lsit-item-title> 에러

0

406

2

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

0

317

1

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

0

383

1

nuxtServerInit 무한 로딩

0

971

3

Nginx Cookie 설정

0

720

2

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

0

290

1

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

0

346

1

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

0

377

1

안녕하세요

0

220

1

궁금한점이있습니다

0

230

1

새로고침시 오류

0

481

1