배경
처음에는 이미지를 서버로 업로드하는 과정에 대해 이해하지 못해서, 단순히 우리가 frontend에서 파일을 업로드할때, data.url 의 string 형식으로 db에 보관해야하는 줄 알았다…
문제점
하지만 이미지 파일을 data URL 형식으로 문자열로 저장하면, 문자열의 크기는 이미지 파일의 크기와 거의 같아진다. 예를 들어, 1MB의 이미지 파일을 data URL로 변환하면 약 1MB의 문자열이 생성. 이러한 문자열을 서버에 저장하면, 매우 많은 저장 공간을 차지하게 되어 서버에 무리가 갈 수 있다...
해결방안
formData를 사용하여 이미지 파일을 서버에 전송
이 경우에는 이미지 파일 자체를 전송하기 때문에, 문자열을 저장하는 것보다 훨씬 효율적이다. formData는 서버에 데이터를 보낼 때 사용하는 객체로, 파일 업로드 등에 사용된다. 때문에 이미지 파일의 크기와 무관하게 효율적으로 서버에 저장할 수 있다.
폼데이터로 전송하기 위해서는 객체 형식의 텍스트 정보는 JSON 형식의 문자열로 변환하여 blob 객체로 만든다. blob 객체를 FormData에 append 메서드를 이용하여 createPostRequest라는 이름으로 추가.
•
FormData는 Blob객체와 File 객체를 모두 지원하지만, 일반 객체는 직접 전송할 수 없다. 따라서, 일반 객체를 전송하려면 먼저 JSON 형식의 문자열로 변환하여 Blob 객체로 만든 후, 이를FormData
에 추가해야 한다
•
HTTP 프로토콜에서는 클라이언트와 서버 간의 통신에서 전송되는 데이터가 일반 객체일 경우, 해당 객체를 직접 전송할 수 없다. 이는 HTTP 프로토콜이 텍스트 기반 프로토콜이기 때문.
•
따라서, 일반 객체를 서버에 전송하려면 객체를 문자열(JSON 형식 등)로 변환하고, 이를 HTTP 요청 메시지에 포함시켜 보내면 서버 측에서도 해당 문자열을 다시 객체로 변환하여 사용한다.
이미지 형식의 정보는 File 객체로 전송. Blob 객체와 비슷하지만, File 객체는 추가적으로 파일 이름과 파일 타입 정보를 함께 가지고 접근 가능하다. 따라서, 이미지 파일을 File 객체로 변환할 때, 이미지 파일의 이름과 타입 정보도 함께 지정해서 보내야 한다.
function toFormData(obj: Partial<IOnSubmitType>) {
const formData = new FormData();
const { images, ...rest } = obj;
const blob = new Blob([JSON.stringify(rest)], { type: 'application/json' });
formData.append('createPostRequest', blob);
if (images) {
Object.values(images).forEach((blob, i) => {
let imgType;
let type;
let name = `BudImg(${Date.now()}${Math.random()})`;
switch (images[i].type) {
case 'image/png':
imgType = 'image/png';
type = '.png';
break;
case 'image/webp':
imgType = 'image/webp';
break;
default:
imgType = 'image/jpeg';
type = '.jpeg';
}
const file = new File([blob], `${name}${type}`, { type: imgType });
formData.append(`images`, file);
});
}
// 폼데이터 데이터 잘들어가나~ 확인!
for (let x of (formData as FormData).entries()) {
console.log(x);
}
return formData;
}
TypeScript
복사