저번에 읽기 쓰기를 끝내고 오늘 스토리지공간에 이미지를 넣는작업을 진행해봤다.
이미지 스토리지공간에 저장하기
파이어베이스에 일단 스토리지를 생성해주고 시작했다.
그리고 어제 만들어둔 이름과 나이쓰는 create.js에 같이 작업을해주었다.
이미지를 스토리지에 올리는건 꽤나 간단했다.
(사실 조금 버벅였음)
- 일단 index.js에 storage를 내보내주는 코드를입력했다.
index.js의 마지막줄에 db를 내보냈던 그 아래에 위처럼 작성해줬다.
그런데 에러가나길래 무슨일인가..하고 찾아봤더니
최상단에 storage를 import해줬어야했더라.. 이러니 에러가 고쳐졌다.
- 다음으로 input태그에 타입을 file로 만들어줬다.
input태그를 하나 더 생성해준 뒤 파일을 올릴 수 있도록 타입을 파일로 변경해줬다. 그리고 파일을 올리게되면
그 파일이 어떤건지 그 파일을 알아야하기에
onChange이벤트를 사용해줬다.
처음으로 콘솔창에 e.target.files[0]를 찍어보니 잘 나왔다.
파일 하나만 올리게할 예정이라 0번째의 파일을 확인했다.
그리고 파일이 잘 확인이되었으니 state에 담아줬다 그 파일을
imgState도 파일이 잘 들어왔는지 확인하기위해 콘솔창에 찍어보았더니 잘 나오더라.
- 스토리지에 저장하는 코드를 입력해줬다.
스토리지에 저장하는코드는 addData를 사용했을 때 같이 이루어질것이다. addData함수는 전에만든 이름과 나이를 데이터베이스에 저장해주는 함수였다.
코드부터 미리보면
이렇게 제작이되어있다.
변수만지정했는데 이게 작동이하나? 싶어서 한번 버튼을눌러서 실행해봤는데 진짜 보내졌다.
변수를 하나씩 알아보면
storageRef와 imgPaths는 경로를 지정해주는것이라했다.
그리고 uploadImg는 그 경로에 이미지를 보내는 과정이라했다.
그래서 imgPaths에 보내줬다 imgState를 그랬더니 스토리지에 파일이 들어가있더라
그런데 파일명을 파일명이라고 하드코딩으로 지정해주었기에
파일이 계속 변경이되었다. 새로운파일이 추가되는것이아니라.
파일명만 변경해주면 될것같다.
파일명은
콘솔창에 찍어보니 파일명이 name으로 표기가되어있길래
imgState.name으로 보내봤는데 그 파일명으로 잘 나타났다.
여러파일이 올라간 모습을 볼 수 있다.
이미지 파일을 화면에 뿌릴 수 있게 url을 받기위해서는
이미지파일은 일단 스토리지에 올라갔으니 그걸가지고 화면에 뿌려주거나 또는
프로필사진 등 사진설정을 할 때 url을 받아와야하니 url을 받는 방법을 알아보자.
위에서 addData안에 변수를 지정해주는것만으로 동작은하긴했으나 그게끝이아니었고
다른 파이어베이스문법을 사용해주어야하는데
아까 지정해두었던
이 코드를 조금 변경시켜줄건데
const addData = ()=>{
const storageRef = storage.ref();
const imgPaths = storageRef.child('image/') + imgState.name);
const uploadImg = imgPaths.put(imgstate)
uploadImg.on('state_changed',
null,
(error) => {
console.error('실패',error);
},
() => {
uploadImg.snapshot.ref.getDownloadUrl().then((url)=>{
console.log('경로',url)
})
}
}
)이런식으로 만들어주면된다.
null부분은 변화시 동작하는 함수이고 (로딩)
에러는 에러시 동작하는 함수 (말그대로 에러이고 error로 에러의이유를알려준다)
마지막은 성공시 동작하는 함수인데 성공했을 때 url을 불러온다.
실행해본결과로
경로가 잘 출력이된다. 그리고 그 앞에 미리제작해뒀던 이름과 나이를 데이터베이스로 보내주는 코드에 이미지 : url, 이라고 넣으면 이미지의 경로도 데이터베이스에 추가될텐데
url은 저 함수내에서 제작이된거라 밖으로 끄집어내면 사용할 수 없다.
그래서 url을 다른변수에 담아서 사용하거나 하는방법도 있겠지만
일반적으로는 이미지를 먼저 업로드하고 성공했을 때 db에 이미지url을 넣는다고
uploadImg코드 안에 성공했을 때 db로 보내는코드를 옮겨서 사용해도된다.
(보통은 이게맞다고함)
그래서 나도
이렇게 작업이되어있던 코드를
최종적으로 이렇게 변경시켜줬다.
원래는 add(inputState,) 로 바로 inputState의 값을 바로보내줬는데
그 아래 img : url을 넣으니 에러가 나서 위에 변수로 다 담아주기로했다.
이렇게 다 담아주고 실행을한뒤 데이터베이스를 확인해본결과로
url까지 잘 들어가있는걸 볼수있었다. 근데 inputState와 img가 분리되어있는거같은데
저래도상관이없는지 모르겠다. 사용하는데 문제만없으면 되지않을까?
라고 생각했는데 문제가 바로생겼다,,; 화면에 시라소니가 출력이안됐다.
그래서
dbData를 이렇게 변경시켜줬다.
데이터베이스에도 새롭게 잘 들어가는걸 볼 수 있었다.
다음엔 로그인과 회원가입을 해볼차례다
