image 업로드 (data_url)
post.js
import
import {firestore, storage} from '../../shared/firebase'
import { actionCreators as imageActions } from './image';
image 미리보기 가져오기
const _image = getState().image.preview;
console.log(typeof _image) // string
image 업로드
-
문자열로 업로드 - firebase docs 참고
-
중복파일명이 생기지 않도록 user_id, 날짜 설정
// 문자열로 업로드
const _upload = storage.ref(`images/${user_info.user_id}_${new Date().getTime()}`).putString(_image,'data_url');
// 업로드 확인
_upload.then(snapshot =>{
snapshot.ref.getDownloadURL().then(url => {
console.log(url)
return url;
}).then(url =>{ // 체이닝
// image url 사용가능
postDB.add({...user_info, ..._post, image_url: url})
.then((doc) =>{
let post = {user_info, ..._post, id:doc.id,image_url: url};
dispatch(addPost(post));
history.replace('/');
// 업로드가 잘 끝났으면 설정해둔 미리보기 이미지를 null로 바꿈
dispatch(imageActions.setPreview(null));
}).catch((err) =>{
window.alert('포스트 작성 실패')
console.log('작성 실패', err)
}).catch((err) =>{ // 이미지 업로드에 문제가 있을 때
window.alert('이미지 업로드 실패')
console.log('이미지 업로드 에러',err)
})
})
})
Post.js
src 수정
<Image shape='rectangle' src={props.image_url}/>
Author And Source
이 문제에 관하여(image 업로드 (data_url)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zo2kim/image-업로드2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)