codestates / codestates/GongJang

Server Error Handling : Multer 인코딩(base64) 데이터 관련 처리 이슈

Open
#186 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

## 어떤 에러인가요?
- 게시글 수정 요청 시, 새로 업로드 하는 이미지파일은 DB에 업데이트 되는데, 기존 이미지파일의 경우, 변경사항이 DB에 반영되지 않는 에러 발견

## 에러 메시지
따로 에러 메시지를 띄우지는 않음.

## 에러 핸들링 방법
1. 새로 업로드하는 이미지파일의 경우 수정요청이 정상적으로 반영 되었기에, 기존 이미지파일 수정요청과 새로 업로드 하는 이미지파일의 수정요청이 어떻게 다른지 확인함.
2. 둘이 요청하는 방식은 똑같으나, 안에 담기는 데이터가 기존 이미지파일의 경우, 서버에서 보내준 기존 이미지파일을 인코딩(base64)한 데이터 그대로 되돌려주는 것을 알게 됨.
3. 해당 요청에 대해서 서버에서는 Multer를 통해 어떻게 들어오는지 콘솔로 찍어봄.
4. 로그를 통해 업로드 파일의 경우 Multer 미들웨어를 통해 req.file(s)로 들어오는 데 반해, 기존 이미지파일(인코딩된 데이터)은 req.body에 담겨 들어오는 것을 확인함.
5. 또한 로그를 통해, req.body로 들어올 경우, 파일이 한 개라면 String / 두개 이상이라면 Array 타입으로 자동변환되어 들어오는 것이 확인됨.
6. 상황을 2가지로 나누어 req.body가 undefined가 아니라면, String / Array 타입에 따라 DB에 반영될 수 있도록 디코딩하여 파일을 저장하는 처리과정 추가함으로써 문제 해결됨

```javascript
if (inputImage !== undefined) {
if (typeof inputImage === "string") {

let path = __dirname + '/../uploads/' + `${userEmail}_${postId}_1`;
let decode
try {
decode = Buffer.from(inputImage, 'base64');
} catch (err) {
return res.status(500).send("기존 업로드 파일의 디코딩에 실패했습니다")
}

await fs.writeFileSync(path, decode, (err) => {
if (err) {
console.log(err);
return res.status(500).send("파일 생성과정에서 오류가 발생했습니다")
}
});

image1 = path;
} else if (Array.isArray(inputImage)) {

for (let i = 0; i < inputImage.length; i += 1) {
let image = inputImage[i];
let path = __dirname + '/../uploads/' + `${userEmail}_${postId}_${i}`;
let decode
try {
decode = Buffer.from(image, 'base64');
} catch (err) {
console.log(err);
return res.status(500).send("기존 업로드 파일의 디코딩에 실패했습니다")
}

await fs.writeFile(path, decode, (err) => {
if (err) {
console.log(err);
return res.status(500).send("파일 생성과정에서 오류가 발생했습니다")
}
});

if (i === 0) {
image1 = path;
} else if (i === 1) {
image2 = path;
} else if (i === 2) {
image3 = path;
}
}
} else {
return res.status(400).send("읽을 수 없는 파일형식입니다")
}
}
// inputImage = string인 경우, array인 경우, undefined인 경우
let exImageLen;

if (inputImage === undefined) {
exImageLen = 0;
} else if (typeof inputImage === "string") {
exImageLen = 1;
} else {
exImageLen = inputImage.length;
}
// console.log("exImagelen: ", exImageLen)

if (inputImageFile !== undefined) {
let newImageLen = inputImageFile.length || 0
let totalLen = exImageLen + newImageLen;

if (totalLen > 3) {
return res.status(400).send("이미지는 최대 3개까지 업로드 할 수 있습니다")
}
for (let i = exImageLen; i < totalLen; i += 1) {
if (i === 0) {
image1 = __dirname + '/../' + inputImageFile[i - exImageLen].path;
} else if (i === 1) {
image2 = __dirname + '/../' + inputImageFile[i - exImageLen].path;
} else if (i === 2) {
image3 = __dirname + '/../' + inputImageFile[i - exImageLen].path;
}
}
}
```

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.