imgUrl 을 FormData 형식으로 변환하기

현재 toastUI를 사용해서 이미지를 꾸미는 기능을 추가해보려고 하고 있다.

그런데 이미지를 저장할때 이미지정보를 imgUrl 로 얻을 수 있다. 

 

 

imgUrl 

말그대로 url 이다.

다만, url 에 해당 데이터를 입력하면 이미지가 나타날 뿐이다.

 

그런데 문제점은 현재 서버에서는 이미지 url 이 아닌 FormData 형식으로 보내주고 있기 때문에 imgUrl -> FormData img파일로 바꾸어주고 싶었다.

 

아래 코드에서 문제점을 해결할 수 있었다.

파라미터인 url 에 imgUrl 을 넘겨주면 formData 에 넣을 수 있는 이미지 파일이 리턴된다.

이미지명은 정해주기가 귀찮아서 faker 라이브러리를 사용하여 랜덤이름으로 넣어주었다.

  const editorToBase64 = async () => {
    const editorInstance = editorRef.current.getInstance();
    var image = editorInstance.toDataURL();
    console.log(image);
    setData(image);
    const imageFile = await convertURLtoFile(image);
    const imageFormData = new FormData();
    imageFormData.append("image", imageFile);
    dispatch(uploadImages(imageFormData));
  };
  const convertURLtoFile = async (url) => {
    const response = await fetch(url);
    const data = await response.blob();
    const metadata = { type: `image/png` };
    return new File([data], `${faker.name.findName()}.png`, metadata);
  };

 

참고자료

https://velog.io/@ordidxzero/Image-URL%EC%9D%84-File-object%EB%A1%9C-%EB%B3%80%EA%B2%BD%ED%95%98%EA%B8%B0

Image URL을 File object로 변경하기