Node.js | Multer 를 이용한 AWS S3 파일 업로드 구현(3)

전 포스트에서 업로드 하는 것까지 구현해보았다.

이번 포스트에서는 클라이언트에서 파일을 조회하는 것을 구현해보겠다.

 

1. 먼저 리스트 항목 등을 클릭했을 경우의 이벤트 함수를 구현해준다. 파라미터는 원하는 값으로 하면 된다.

// 이미 등록된 파일이 있는지 확인
axios.get(`/api/file`, {
    params: {
        file_customer_code: customerKey
    }
}).then(({ data }) => {
    if (data.success) {
        // 파일이 존재할 경우 
    }
})

 

2. 백엔드에서 데이터베이스를 조회하고 있으면 결과값을 반환해주는 라우터를 작성한다.

router.get('/', function (req, res, next) {
    const query = req.query;
    const customer_code = query.file_customer_code

    try {
        File.findOne(
            {
                where: {
                    file_customer_code: customer_code
                }
            }).then((result) => {
                if (result) {
                    res.send({ success: true, result })
                }
                else {
                    res.send({ success: false })
                }
            })
    }
    catch (Err) {
        res.send({ success: false })
    }
})

 

3. 데이터가 존재할 경우 클라이언트의 file State 를 변경해주기 위해 fileReducer를 수정한다.

( 데이터베이스의 값을 불러와 다운로드 할 때 필요한 파라미터들을 클라이언트로 전송 )

function fileReducer(state: any, action: any) {

    switch (action.type) {
        case 'init':
            return initFileState;
        case 'listClick':
            var newState = state;
            Object.keys(newState).map((item: any, index: any) => {
            	if(item === 'file_location') { // 위치로 s3 url을 만들어 다운로드 기능을 구현한다.
                	newState[item] = 'https://  s3 url ' +action.value[item]
                }
                else {
                	newState[item] = action.value[item]
                }
            })
            return newState;
        default:
            return {
                ...state,
                [action.name]: action.value
            }
    }
}

 

4. fileDispatch를 적용해준다. (DB 내용이 state에 잘 들어오게끔)

// 이미 등록된 파일이 있는지 확인
axios.get(`/api/file`, {
    params: {
        file_customer_code: customerKey
    }
}).then(({ data }) => {
    if (data.success) {
        fileDispatch({ type: 'listClick', value: data.result })
    }
})

 

 

이 파일의 key 값인 s3에 저장된 경로가 클라이언트로 넘어오면 클라이언트쪽에서 파일 다운로드 하는 로직을 구현할 수 있다.

 

1. 리스트 항목같은 데이터를 조회하고자 하는 버튼을 클릭했을 때 해당 데이터에 맞는 파일이 존재하는지 데이터베이스를 조회한다.
2. 데이터베이스에 없으면 그냥 패스. 만약 있을 경우 데이터베이스에 저장된 내용 중 file_location( s3 file key )를 클라이언트로 가져온다.
3. 클라이언트에서 s3에 접속하여 다운로드를 한다.