미리보기 이미지
JavaScript의 fileReader를 사용하여 파일 객체의 내용물을 읽어와서 미리보기를 생성한다
Upload.js
파일 객체 읽어오기
const selectFile = (e) =>{
// 파일리더 객체 만들기
const reader = new FileReader();
const file = fileInput.current.files[0];
// 어떤 것을 읽고싶은지 파일 객체 넣기 (내장함수 사용)
reader.readAsDataURL(file);
// 읽기가 끝나면 발생하는 이벤트 핸들러
reader.onloadend = () =>{
console.log(reader.result)
// 결과 값을 PostWrite에서 사용하기 위해 리덕스로 보내줘야함
}
}
image.js
action
const SET_PREVIEW = 'SET_PREVIEW'
action creators
const setPreview = createAction(SET_PREVIEW, (preview) =>({preview}));
초기값 설정
const initialState = {
image_url:'',
uploading: false,
preview:null,
}
reducer
[SET_PREVIEW] : (state, action) => produce(state, (draft) =>{
draft.preview = action.payload.preview;
})
export
const actionCreators = {
uploadImage,
uploadImageFB,
setPreview
}
PostWrite.js
미리보기 연결하기
const preview = useSelector((state)=> state.image.preview);
미리보기 이미지를 선택 안 했을 때
- 미리보기 공간이 있다는 것을 알려주기 위해 빈 공간에 기본 이미지를 넣어줌
<Image shape='rectangle' src={preview? preview : 'http://via.placeholder.com/400x300'}/>
Upload.js
미리보기 넣어주기
reader.onloadend = () =>{
dispatch(imageActions.setPreview(reader.result));
}
Author And Source
이 문제에 관하여(미리보기 이미지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@zo2kim/미리보기-이미지저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)