[React/JS] Image URL로 파일 객체(File object) 생성하기

https://avoc-o-d.tistory.com/91

[React/JS] CORS 에러 해결하기(이미지 URL을 API 요청, 이미지 URL로 Blob, Blob로 File 생성)

fetch하실 때, CORS 에러가 날 시 참고해주세요!

 

 

File 객체

const convertUrlToFile = async (url) => {
  const response = await fetch(url);
  const data = await response.blob();
  const filename = url.split("/").pop(); // url에서 파일명 추출
  const ext = url.split(".").pop(); // url에서 이미지 형식 추출
  const metadata = { type: `image/${ext}` };
  return new File([data], filename, metadata);
};

결론적으로 코드는 위와 같습니다!

 

 

 

"https://이미지이름.jpg";

예를 들어, 위와 같은 이미지 url이 있다고 할게요!

1. response.blob() : 응답을 Blob(타입이 있는 바이너리 데이터) 형태로 반환 (주로 이미지 데이터를 처리할 때 사용)
2. .split("/").pop(): "/" 앞에 있는 이미지 이름을 추출
3. .split(".").pop() : "." 앞에 있는 jpg 이미지 형식을 추출
4. { type: `image/${ext}` } : 추출한 이미지 형식을 이용해서 이미지 타입 지정
5. 준비해놓은 파일 속성들로 파일을 만들어 리턴해줍니다~!