인프런 커뮤니티 질문&답변
작성한 질문수
질문 드립니다!
작성
·
262
답변 2
1
제로초(조현영)
지식공유자
this.$store이 undefined라는 걸 에러메시지를 보고 바로 캐치하셔야 합니다.
왜 this.$store이 Undefined냐면 this문제 때문이고 this문제는 function이 arrow가 아니라서겠죠?
이런 식으로 캐치하실 수 있어야 합니다.
0
닉닉닉네임
질문자
아 그렇군요 ㅠㅠ 감사합니다 this가 비어있어서 그랬던것같네요.
그런데 지금 arrow함수로 바꿔보았는데 이번엔 $store에서 에러가 걸리는것같습니다.
아예 싹 지우고 다시 코드를 써보는게 맞을까요?
너무 답답해서 미칠뻔했는데.. 빠른 답변 정말 감사드립니다.
닉닉닉네임
질문자
감사합니다. 노드버드를 클론코딩해서 만들어보고 이번에 제가 웹페이지를 새로 짜보고 있는데 어딘가 잘못된것같습니다.
질문이 너무 많은데.. 감사합니다.
<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>
onChangeImages: (e) => {
이런 형식이 화살표 함수입니다. 화살표 함수는 this가 다른 거 아시죠?