Firebase_ 웹 및 Storage에 사진 업로드

  웹에 사진 업로드하기 및 썸네일  

 

image만 업로드가능한 input태그를 사용.

업로드한 사진 정보를 받아올 state인 sttachment 정의.

web API를 사용하여 사진 정보(result)를 attachment에 저장.

result값은 업로드된 사진 정보값.

attachment를 사용하여

사진을 선택했을 때 썸네일이 화면에 나타나도록 한다.

(아직 store에 저장되지 않았으므로, 이 url을 사용)

Clear을 누를 경우,

파일업로드가 취소되도록

attachment를 초기화한다.

---

  storage에 사진 업로드  

 

 

우선 storage를 import, export 해준다.

 

 

 

우선 Reference를 살펴보자.

reference는 storage에 업로드다운로드등등 할 수 있다.

파일에 대한 reference를 만들고, 파일을 reference에 업로드할 것이다.

 

1. reference 만들기

  firestore.storage().ref().child('파일경로');  

child의 인자로 'user id/파일이름'으로 만들면

유저별로 디렉토리관리가 가능하다.

uuid()는 익명 id를 만들어주는 자바스크립트 라이브러리이다.

 

2. reference에 사진 업로드

store에 사진을 upload하기 위해서는 put이나 putString 메서드를 사용해야 한다.

put 메서드는 http메서드,

putString은 string메서드이다.

사진정보 string인 attachment를 가지고 있으므로,

string을 필요로 하는 putString을 사용해보자.

reference의 위치에 string을 업로드 하는 메서드.

  attchmentRef.putString(문자열, 문자열종류);  

---

 

store안에 있는 사진 url을 가져오기(fetch)위해서는 getDownloadURL을 사용한다.

파일을 submit할경우, 이 url을 활용하여 사진을 화면에 나타나게한다.

 

 

 

---

 

storage관련 내용 전체 flow.

제출버튼을 클릭 했을 때, 

storage에 reference(파일 저장 경로)를 만들고,

reference에 파일 정보를 넣고, format을 'data_url'로 정한다.

거기에서 URL을 다운받아와서 attachmentUrl에 저장한다.

 

nweetObj를 만들어서,

거기에 입력받은 텍스트, 만든 날짜, 만든사람 id, 사진 url을 저장한다.

(사진이 없을 경우 attachmenUrl은 초기값 ''으로 저장된다.)

DB의 nweets 컬렉션에 실시간으로 새로운 nweetObj를 더한다.

 

새롭게 트윗말고 뉴윗했으므로

nweet(text 값이었던 state값), sttachment는 초기화한다.