시작하며
토이프로젝트에서 회원가입 기능과 회원 정보 수정 기능을 만들고 있었다.
위와 같이 FormData 형식으로 각종 회원 정보와 이미지 파일을 서버에 넘겨줘야 했다.
-
input type="file"을 통한 파일 업로드를 받아 이미지를 넘겨주거나 -
assets 폴더에 있는 기본 이미지인 png 파일을 넘겨줘야 했다.
그런데 후자의 방법을 모르겠어서 정리하며 알아보고자 한다!!
선수지식들
FILE API 란?
FILE API란 단순 텍스트 데이터 뿐만 아니라 이미지, 오디오, 비디오 등의 대용량 바이너리 데이터를 다루기 위한 API이다.
구체적으로 File API는 Blob, File, FileReader, FileList 객체로 구성되어 있다.
-
Blob: 주로 "파일 형태가 아닌" 바이너리 데이터(마이크 소리, canvas그림 등)를 다룬다.
-
File: Blob을 상속 받는 객체로, 주로 "파일 형태"의 바이너리 데이터(mp3, png 파일 등)를 다룬다.
-
FileReader: File이나 Blob에 저장된 바이너리 데이터를 읽어들이는 객체다.
-
FileList: HTML Input엘리먼트를 통해 입력 받은 파일(File객체 형태)들을 저장하는 유사배열객체다.
Blob 이란?
Blob이란 특정 "MIME Type"의 "바이너리 데이터"를 저장하는 객체다.
Blob 자체가 Binary Large Object의 약자로, 대용량 바이너리 데이터 객체를 의미한다.
Blob은 바이너리 데이터를 다루기 때문에 텍스트 뿐만 아니라 이미지, 오디오, 비디오 데이터도 다룰 수 있다.
-
실제 사용 시에는 주로 "파일 형태가 아닌 바이너리 데이터"(마이크 소리, 카메라 영상, 화면 등)를 다룬다.
-
mp3, png 등의 파일을 다룰 땐 Blob을 상속 받는 File객체를 주로 사용한다
나는 Blob을 생성하고 이를 상속받는 File 객체를 만들어서 png 파일을 처리할 것이다!
<input type='file' placeholder='이미지업로드' accept='image/*' ref={imgRef} onChange={onChangeImg}></input>
input 태그를 통해 이미지를 업로드하면 위와 같이 FileList 객체가 출력되는 것을 확인할 수 있다.
그리고 기본이미지를 출력해보면?
import defaultProfile from '../../assets/profile.png';
...
console.log(defaultProfile);
이처럼 assets 에 있는 이미지를 출력해보면 base64로 인코딩 된 이진데이터가 출력된다.
자 이제 어떻게 변환할 것인지 코드를 통해 살펴보자
import defaultProfile from '../../assets/profile.png';
// atob()는 Base64를 디코딩하는 메서드
const byteString = window.atob(defaultProfile.split(',')[1]);
const mimeString = defaultProfile.split(',')[0].split(':')[1].split(';')[0];
const ab = new ArrayBuffer(byteString.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
const blobFile = new Blob([ab], { type: mimeString });
return new File([blobFile], 'defaultProfile.jpeg');
};위와 같이 생성된 blobFile 을 먼저 출력해보면
아래와 같이 정상적으로 Blob 객체가 생성되었음을 알 수있다.
마지막으로 생성된 File을 출력해보자!
위와 같이 File 객체가 제대로 생성되었음을 확인할 수 있다.
이제 이 함수를 가지고 회원가입 시 아래와 같이 분기를 처리해서 코드를 작성한다면 기본 프로필 이미지를 넣어줄 수 있다.
if (file) {
formData.append('profile', file[0]);
} else {
formData.append('profile', profileURItoFile());
}참고
