Node.js | Multer 를 이용한 AWS S3 파일 업로드 구현(4) | React(Next.js) url image download

DB에서 데이터를 가져와 fileState 에 담아주었다면, fileState 의 file_location에 S3 파일 저장위치가 담겨있을 것이다.

( fileReducer 참고)

 

리스트 항목을 클릭했을 때 file_location이 있는 상태면 다운로드를 할 수 있게끔 구현해보자.

1. 이전 코드에 추가해준다.

<WrapperDiv
    kindOf={`input`}
>
    <TextField
        label={`사업자등록증`}
        type='file'
        color='primary'
        size='small'
        InputLabelProps={{
            shrink: true,
        }}
        name={`file_object`}
        onChange={(e: any) => {
            let reader = new FileReader();
            let file = e.target.files[0];
            reader.onloadend = () => {
                fileDispatch({ name: e.target.name, value: file });
                fileDispatch({ name: 'file_url', value: reader.result });
            };
            reader.readAsDataURL(file);
        }}
    />
</WrapperDiv>
{fileState.file_url !== '' &&
    <WrapperDiv>
        <img style={{ width: "100%", height: "100%" }} src={fileState.file_url} />
    </WrapperDiv>
}
{(!fileState.file_url && fileState.file_location !== '') &&
    <GridBoxDiv
        gtc={`1fr 1fr`}
        gap={`10px`}
        ai={`center`}
        kindOf={`input`}
    >
        <TextField
            label={`사업자등록증 파일`}
            type='text'
            color='primary'
            size='small'
            InputLabelProps={{
                shrink: true,
            }}
            value={'image.png'}
            disabled={true}
        />
        <Button
            width={`100%`}
            height={`35px`}
            padding={`0`}
            margin={`0`}
            type={`button`}
            kindOf={`greyButton`}
            hoverGrey={true}
            id={fileState.file_location}
            onClick={download}
        >
            download
        </Button>

    </GridBoxDiv>
}

 

리스트 항목을 클릭했을 때 file_url은 없는 상태(undefined)일 것이고 ( DB에 없는 내용이기 때문 ) file_location은 s3 저장위치를

나타낼 것이다.

 

2. 다운로드 버튼을 만들었고 이제 버튼 이벤트를 추가해준다.

    const download = (e: any) => {
        console.log(e.target.id);
        fetch(e.target.id, {
            method: "GET",
            headers: {}
        })
            .then(response => {
                response.arrayBuffer().then(function (buffer) {
                    const url = window.URL.createObjectURL(new Blob([buffer]));
                    const link = document.createElement("a");
                    link.href = url;
                    link.setAttribute("download", "image.png"); //or any other extension
                    document.body.appendChild(link);
                    link.click();
                });
            })
            .catch(err => {
                console.log(err);
            });
    }

 

url 데이터가 있을 때 클릭하면 다운로드를 할 수 있게 해주는 함수이다. 파일의 이름도 지정해줄 수 있다.

여기까지 내용을 정리해보면

 

1. input type file 을 이용해 클라이언트 State 안에 file 내용을 저장하고, formData 로 만들어 백엔드에 전송한다.
2. 백엔드에선 multer 로 file을 인식한 뒤 s3.upload 메소드로 파일을 저장해준다. 저장이 성공하면 DB에 key값이랑 location을 저장한다 (file은 인코딩 해아함 )
3. 클라이언트에서 이미 등록된 사진을 확인할 경우 먼저 DB에 해당 key에 부합하는 데이터가 있는지 확인 후 있으면 location을 가져온다.
4. location을 Reducer에서 s3 파일 위치로 만들어 state에 담아준다.
5. url download 함수와 버튼을 만들어 다운로드 가능하게끔 만들어준다.

 

@@ 혹시 큰 용량의 파일이 업로드가 413에러가 뜰 때 nginx가 설치되어있다면 /etc/nginx/nginx.conf 파일에 

http {
    client_max_body_size 5M;

    ...
}

이 구문을 추가해주자.