파이어베이스 당근마켓 만드는 강좌에서..

[최진성]

파이어베이스 업로드.html 에서 사진을 선택한 후 올리기를 누르면 잘 나옵니다.

근데 여러개를 올려야 하는데 자꾸 똑같은 사진만 나옵니다..

뭐가 문제인가요..

[codingapple]

사진 꺼내서 html로 보여주는 코드에 사진경로가 잘 입력되었나 확인해봅시다

[최진성]

결과.forEach((doc)=>{
        console.log(doc.data());
        var 템플릿 = `<div class="product">
      <div class="thumbnail" style="background-image: url('${doc.data().이미지}')"></div>
      <div class="flex-grow-1 p-4">
        <h5 class="title">${doc.data().제목}</h5>
        <p class="date">2030년 1월 8일</p>
        <p class="price">${doc.data().가격}원</p>
        <p class="float-end">♡0</p>
      </div>
    </div>`;

이렇게 했는데 문제가 뭔지 모르겠습니다

[codingapple]

코드는 별이상없는거같은데 상품등록시 같은이미지를 올린게 아닐까요

[사각사각]

앗 저도 같은 문제가 있어요!! 

문제 
- 새로운 이미지 업로드하면 이전에 이미지가 사라지고, 새로운 이미지로 덮어씌워짐. ㅠㅠ 
- 이미지가 하나밖에 저장이 안되는 상황 입니다. ㅠㅠ 

혹시 어떻게 해야 할까요 ㅠㅠ 
찾아보고는 있는데 
firebase 도큐먼트 읽어봐도 딱히 잘못된 거 같지 않아서 해결을 못하고 있어요. 

한번만 알려주십쇼 ㅠㅠ

[INDEX 파일]
<script>
const db = firebase.firestore();
db.collection('product').get().then((결과) => {
결과.forEach((doc) => {
console.log(doc.data());
var 템플릿 = `<div class="product">
 <div class="thumbnail" style="background-image: url('${doc.data().이미지}')"></div>
 <div class="flex-grow-1 p-4">
 <h5 class="title">${doc.data().제목}</h5>
 <p class="date">2030년 1월 8일</p>
 <p class="price">${doc.data().가격}원</p>
 <p class="float-end">♡0</p>
 </div>
 </div>`;
$('.container').append(템플릿);
 })
 });
</script>


[UPLOAD 파일]
<script>
const db = firebase.firestore();
const storage = firebase.storage();
$('#send').on('click', function () {
var file = document.querySelector('#image').files[0];
var storageRef = storage.ref();
var 저장할경로 = storageRef.child('image/' + '파일명');
var 업로드작업 = 저장할경로.put(file);
 업로드작업.on('state_changed',
// 변화시 동작하는 함수 
null,
//에러시 동작하는 함수
 (error) => {
 console.error('실패사유는', error);
 },
// 성공시 동작하는 함수
 () => {
 업로드작업.snapshot.ref.getDownloadURL().then((url) => {
 console.log('업로드된 경로는', url);

var 저장할거 = {
제목: $('#title').val(),
가격: $('#price').val(),
내용: $('#content').val(),
날짜: new Date(),
이미지: url
 };
 db.collection('product').add(저장할거).then((result) => {
 console.log(result);
 window.location.href = '/';
 }).catch((err) => {
 console.log(err);
 });
 });
 }
 );
 });
</script>

 

[사각사각]

오 저 해결한듯요 (아마도? 되긴됨)

해결 : 
파일 이름 저장하는 곳에 날짜를 넣음
[UPLOAD 파일]
var 저장할경로 = storageRef.child('image/' + new Date() + '파일명');

정확하게 이렇게 하는건지는 모르겠는데,  
stackoverflow에 유사한 솔루션이 있어서 (millisecond을 적용해라)
해볼까 하다가 잘안되서 그냥 날짜 넣으면 되나 해서 넣었는데 됩니당!!

관련 stackoverflow 글 : 
https://stackoverflow.com/questions/57785282/firebase-storage-only-stores-one-image-deletes-previous-uploaded-ones

[사각사각]

다시 보니까 애당초 '파일명'이라고 잘못 입력되어있었네요 ㅋㅋㅋㅋ
아무생각 없이 따라친 흔적... (지금 보니 이제까지 Firestore에 '파일명'이라고 바보같이 저장되어있네요 ㅋㅋ)

그냥 이렇게 해도 되네요.
var 저장할경로 = storageRef.child('image/' + file.name);


파일이름이 같으면 계속 덮어쓰기가 된다는 것을 배웠읍니다.
그럼 ㅅㄱ

[글쓴이]

글