codestates / codestates/GongJang

Server Error Handling : Node.js FS모듈의 readFile 메소드 실행 시, 데이터가 깨지는 이슈

Open
#123 0 comments 0 reactions 1 assignee Claimed by @yjy1412 View on GitHub
error
Dominant language
JavaScript
Stars
0
Forks
2
PR merge metrics
No merged PRs in 30d

Description

## 어떤 에러인가요?
- Multer를 통해, 클라이언트에서 업로드한 이미지 파일을 Multer storage로 설정한 디렉토리에 저장한 후, 이를 Fs모듈을 통해 읽어올 때 데이터가 깨지는 현상 발생

## 에러 메시지
FS모듈을 통해 읽어온 이미지파일의 데이터를 console.log로 찍었을 때, Buffer type의 데이터가 아니라, 디코딩이 잘못 되었을 때 나타나는 log가 나타남.

## 에러 핸들링 방법
[기존 이미지파일을 불러오던 코드]
```javascript
// 프로필 이미지 처리
// profile_image라는 선언 변수에 DB에서 조회한 불러올 이미지 파일의 절대경로를 담음
const convertImg = fs.readFileSync(profile_image, 'utf8', (err, data) => {
if (err) {
console.log(err);
res.status(500).send("서버에 오류가 발생했습니다")
}
return data
})
console.log(convertImg);
```

처음에는 절대경로를 지정하는 게 잘못 되었나 싶어 알아봄.
여기서 원인을 찾지 못함.
예전 한글에서 작성하던 파일을 word파일로 열었을 때, 비슷한 경험을 했던 것이 기억남.
디코딩 방식에서 뭔가 문제가 있을 수 있겠다고 생각함.
FS 모듈로 파일을 불러올 때, 디코딩 설정이 'utf8'로 지정된 것을 확인하고, 디코딩 방식에서 무슨 문제가 있는지 구글링 함.
'utf8'은 텍스트 형태의 파일을 읽고자 디코딩할 때 설정하고, 이미지 파일은 바이너리 형식의 버퍼 타입으로 존재하기에 'utf8'로 디코딩할 수 없음을 알게 됨.

[ 에러해결 후 최종 코드]
```javascript
let convertImg;
try {
convertImg = fs.readFileSync(profile_image, (err, data) => {
return Buffer.from(data).toString('base64');
})
} catch {
console.log(convertImg);
res.status(500).send("서버에 오류가 발생했습니다")
}
console.log(convertImg);
```
이미지 파일을 readFileSync로 읽어온 후, 해당 버퍼 데이터를 'base64'로 인코딩 설정하여 다시 클라이언트로 전송하도록 설정
문제 해결 됨.

## 에러 핸들링을 위해 참고한 레퍼런스 링크
[레퍼런스 1_ fs.readFile의 동기/비동기 처리의 차이](https://opentutorials.org/module/938/7373)
[레퍼런스 2_ 서버 이미지 파일 처리의 기본 개념](https://darrengwon.tistory.com/1193)
[레퍼런스 3_ 이미지파일 인/디코딩 방법](https://minu0807.tistory.com/46)

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.