[JS] 이미지 전송; base64와 FormData
음식 인식을 위한 음식 사진, 유저 사진 등 서버로 이미지를 전송해야할 필요가 있었다.
기존에는 base64 방식을 채택했으나, 서버로 전송하는데 시간이 오래 걸려 이 부분을 개선하기로 했다.
이미지 전송에는 여러 가지 방법이 있지만,
대표적인 방식인 Base64와 FormData에 대해 알아보도록 하자!
📍Base64 인코딩
이진 데이터를 64개의 ASCII 문자로 변환하는 방식이다.
인코딩 방법
24비트 버퍼에 위쪽(MSB)부터 한 바이트씩 세 바이트를 집어넣는다. (버퍼의 남은 부분은 0으로 채워넣는다.)
그리고, 버퍼의 위쪽부터 6비트(2^6=64)씩 잘라 그 값을 읽어 Base64 색인표와 맵핑한다.
이 과정을 거치면 4개의 ASCII 문자로 변환된다.
++예시
특징
- 데이터 손실 방지: 이진 데이터를 ASCII 문자열로 변환하므로, 데이터 전송 중에 발생할 수 있는 데이터 손실을 방지할 수 있다.
- 호환성: ASCII 문자만을 사용하므로, 대부분의 시스템과 호환된다.
- URL 안전: Base64 인코딩된 문자열은 URL에 안전하게 포함될 수 있다.
그러나, 원래 3바이트(24비트)의 이진 데이터가 4개의 ASCII 문자로 변환되므로, 데이터 크기가 약 33% 증가하게 된다.
따라서 대용량의 데이터를 전송하는 경우에는 비효율적일 수 있다.
📍Form Data
JavaScript에서 XMLHttpRequest, Fetch와 같은 웹 API와 호환되는 방식으로 데이터를 보내기 위한 객체이다.
이때 Form은 웹 폼(Form)을 의미하는데, 사용자가 입력한 데이터를 서버로 전송하는 데 사용되는 HTML 요소이다.
FormData 객체는 이 웹 폼의 데이터를 표현하는 데 사용되며, 각 키-값 쌍은 폼의 각 필드를 나타낸다.
HTTP 요청으로 서버 전송할 때, Content-Type 헤더 속성은 multipart/form-data라는 MIME타입이고, 인코딩되어 전송된다.
- MIME 타입
: Multipurpose Internet Mail Extensions
: 이메일 보낼 때 사용되는 인터넷 표준이다. 원래는 이메일에서 비-ASCII 문자를 지원하기 위해 만들어졌지만, 현재는 웹에서도 널리 사용되고 있다.
: 타입(type)과 서브타입(subtype)이라는 두 부분으로 이루어져 있다. 이 두 부분은 슬래시(/)로 구분된다.
: 웹에서는 HTTP 응답의 'Content-Type' 헤더에 MIME 타입을 지정하여, 클라이언트에게 응답의 내용이 어떤 형식인지 알려준다. 이를 통해 클라이언트는 적절한 방식으로 데이터를 처리할 수 있다.
사용 방법
FormData 객체 생성 후, append(key, value)를 통해 데이터를 추가할 수 있다.
이때, iOS에서 파일의 URI가 'file://'로 시작하는데, 이 부분을 제거하지 않으면 일부 라이브러리나 API에서 파일을 제대로 인식하지 못할 수 있다. 따라서 iOS에서 파일을 FormData로 전송할 때는 'file://' 부분을 제거해야 한다.
const form = new FormData();
const uri =
Platform.OS === 'android'
? uploadInfo.file
: uploadInfo.file.replace('file://', '');
form.append('name', testName);
form.append('image', {
uri,
name: 'image.jpg',
type: 'image/jpg',
})
서버에 전송하는 방법은 다음과 같다.
// fetch 이용
async function uploadData() {
try {
const response = await fetch('서버 URL', {
method: 'POST',
body: form,
headers: {
'Content-Type': 'multipart/form-data',
},
});
const data = await response.json();
console.log(data);
} catch (error) {
console.error(error);
}
}
uploadData();
// axios 이용
async function uploadData() {
try {
const response = await axios.post('서버 URL', form, {
headers: {
'Content-Type': 'multipart/form-data',
},
});
console.log(response);
} catch (error) {
console.error(error);
}
}
uploadData();
참고
https://ko.wikipedia.org/wiki/%EB%B2%A0%EC%9D%B4%EC%8A%A464
https://developer.mozilla.org/en-US/docs/Web/API/FormData