사진 업로드하고 전송하기

 

현재 회사에서 관리자페이지에서 사진을 수정해서 서버로 보내는 기능을 구현하고 있다.

 

1. 사진 미리보기 와

2. 사진을 api 서버로 전송하기

 

를 구현하는데,  사진 미리보기는 

 

const url = new FileReader();
url.createObjectURL(e.target.files[0])

정확하게 위처럼 코드를 작성한 것은 아니고 대략 위와 같이 코드를 작성했다.

 

createObjectURL는  Blob(Binary Large Object)객체를 URL로 변경시켜주는 것인데, 이렇게 해서 URL로 메모리에 저장되면 브라우저에서는 해당 URL을 해제하기 전에는 유효하다고 판단하여 자바스크립트의 가비지 컬렉션이 동작하지 않는다고 한다.

 

따라서 메모리에서 해제하는 코드( revokeObjectURL을 사용하면 된다! )를 아래와 같이 작성해야한다.

//Create Blob URL
const objectURL = window.URL.createObjectURL(blob);

//Revoke Blob URL after DOM updates..
window.URL.revokeObjectURL(objectURL);

 

 

createObjectURL 말고도 readAsDataURL 이라는 것을 사용하여 이미지 미리보기를 구현할 수도 있다. 

 

readAsDataURL은 가비지 콜렉터에 의해 사용하지 않으면 자동으로 메모리에서 없어지나 createObjectURL은 동기적으로 실행되는 데 반해 readAsDataURL은 비동기이다.

 

이 외에도 차이점이 더 있다.

 

사진을 전송할 때는 FormData 객체를 사용했는데,이미지는 대략  FormData.append('image', e.target.files[0]) 와 같이 코드를 작성해서 binary 데이터로 보냈다. 

 

기능을 구현하면서 서버로 이미지 데이터가 어떠한 형식 즉, base64형식(binary를 문자열로 변환)로 가는지 아니면 blob으로 가는지 생각해보는 계기가 되었다.