db에 이미지 넣지는 않음 용량때문에 문자만
한 도큐먼트에 용량제한도 있고...
스토리지 저장 (하드디스크와 비슷) 후 url을 db에 저장
권한 설정 : 허용으로 변경
firebase > storage > 규칙
~false부분을 true로 바꿔주기
올리기
const db = firebase.firestore(); // db 통신 문법 가져옴
const storage = firebase.storage(); // storage 문법 쓰기위한 메서드들 가져올수있음
$('#send').click(function () {
var file = document.querySelector('#image').files[0];
// 폴더지정하는 작업 : 1,2행
var storageRef = storage.ref();
var loc = storageRef.child('image/'+file.name);
// 파일을 올리는 작업. js로 파일 찾아 넣기
var uploading = loc.put(file);
업로드 작업 중 수행할 작업 설정하고 싶다면
uploading.on( 'state_changed',
// 변화시 동작하는 함수
null,
//에러시 동작하는 함수
(error) => {
console.error('실패사유는', error);
},
// 성공시 동작하는 함수
() => {
uploading.snapshot.ref.getDownloadURL().then((url) => {
console.log('업로드된 경로는', url);
});
}
);전체코드
업로드 flow
이미지를 firebase storage에 업로드 > 이미지 업로드 완료 시 나머지 정보 DB 업로드 > 완료
// (레이아웃)
<body>
<!-- navbar 영역 -->
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">하루마켓</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container mt-3">
<input type="text" class="form-control mt-2" id="title" placeholder="title">
<textarea class="form-control mt-2" id="content">content</textarea>
<input type="text" class="form-control mt-2" id="price" placeholder="price">
<input class="form-control mt-2" type="file" id="image">
<button class="btn btn-danger mt-3" id="send">올리기</button>
</div>
// (javascript)
<script>
const db = firebase.firestore(); // db 통신 문법 가져옴
const storage = firebase.storage(); // storage 문법 쓰기위한 메서드들 가져올수있음
// 업로드할 데이터
$('#send').click(function () {
var file = document.querySelector('#image').files[0];
// 폴더지정하는 작업 : 1,2행
var storageRef = storage.ref();
var loc = storageRef.child('image/' + file.name);
// 파일을 올리는 작업. js로 파일 찾아 넣기
var uploading = loc.put(file);
uploading.on('state_changed',
// 변화시 동작하는 함수 (업로드중일때)
null,
// 에러시 동작하는 함수
(error) => {
console.error('실패사유는', error);
},
// 성공시 동작하는 함수
() => {
uploading.snapshot.ref.getDownloadURL().then((url) => {
console.log('업로드된 경로는', url);
var data = {
title: $('#title').val(),
content: $('#content').val(),
price: Number($('#price').val()),
date: new Date(),
image:
}
db.collection('product').add(data).then((result) => {
// 성공 후 저장된 결ㄹ과가 담겨옴
console.log(result.id)
// 성공 후 실행할 코드
// window.location.href = "/index.html"
}).catch((err) => {
// 실패 후 실행할 코드
console.log(err)
})
});
}
);
})
개발 블로그