미리보기 이미지

HYOJIN·2021년 10월 4일
0

React

목록 보기
7/9
post-thumbnail

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));
}
profile
https://github.com/hyojin-k

0개의 댓글