firebase 이미지업로드 강의중

[유용환]

강의에서 자바스크립트로 할때
const storage = firebase.storage(); var storageRef = storage.ref(); var 저장할경로 = storageRef.child('image/' + '파일명'); var 업로드작업 = 저장할경로.put(업로드한 파일 JS로 찾은거)
이렇게 하라고 할때 
vue로 하면 storageRef.child 이 부분에서 child밑에 .. 이렇게 나와서 보면 Property 'child' does not exist on type 'string'.
이런게 나와서 적용이 안되는것 같은데 이거 vue에 맞추려면 어떻게 해야하는건가요 
검색해봐도 결과가 잘 안나옵니다.

[codingapple]

크롬 콘솔창에 뜨는 에러인가요?

[유용환]

아니요 콘솔창에는 GET localhost/undefined 404 (not found) 이것이 나오고
vs코드에서 뜹니다.

[codingapple]

에디터에서 뜨는건 타입스크립트 안쓰면 무시해도 됩니다 아마 다른게 문제일듯요

[유용환]

사용자가 클릭했을때
img_more(){
      this.storageRef = storage.ref()
      this.img_road = this.storageRef.child('image/' + this.file)
      
      console.log(this.img_road)
    } 
이 함수를 실행하는데 콘솔로 출력된것이 proxy가 나오는데 그안을 보면 사용자가 올린것에 대한 정보는 없고 잘 모르는것만
나오는데 뭐가 문제인가요 콘솔에 this.file하면 사용자가 올린 것의 이름이 나옵니다. 
강의에서 자바스크립트로 할때에는 사용자가 올린 이미지의 이름을 변수에 저장해서 그걸 스토리지에 저장하는 문법으로
한것같은데 어떤게 문제인가요

[codingapple]

storageRef.child('image/' + '파일명').put(업로드한파일) 까지 넣어야 업로드 됩니다

[유용환]

무언가 올려지긴 했는데 스토리지 올린 이미지의 유형이 application/octet-stream 이렇게 되어있는데 put(업로드한파일)
이부분의 업로드한 파일에 this.file(콘솔로 출력하면 FileList {0: File, length: 1} 이것이 나오고 안에 이미지 정보가 잘 있습니다)
을 넣고 실행했는데 이상하게 나옵니다 이거 왜 그런건가요

[codingapple]

FileList 라고 나오는거 뒤에 [0] 붙여야될 수도 있습니다

[유용환]

잘 올려졌는데 이미지를 여러개 올리려고 해서

img_more(){
      
      var storageRef = storage.ref()
      this.img_road[0] = storageRef.child('image/' + this.file.name).put(this.file[0])
      this.img_road[1] = storageRef.child('image/' + this.file.name).put(this.file[1])

      console.log(this.file)
    }

이렇게 해봤는데 콘솔로 출력해보면 첫번째와 두번째 이미지 모두 나와야 하는데 두번째 이미지만 나오는데 이거 왜 그런건가요
img_road는 배열로 저장되도록 했습니다.

[codingapple]

this.file은 이미지정보 2개 담은 array같습니다

[글쓴이]

글