[Javascript] 업로드 이미지 BE와 주고 받기(FE, by Blob 객체)

Blob 객체에 대한 자세한 설명은 아래 링크에 작성하였다. https://yubi5050.tistory.com/102

[Javascript] 유용한 Library 정리

 

👉 JS 에서 업로드 된 이미지 BE와 주고 받기

업로드 된 이미지를 보내고 받는 부분의 FE 이다. 

ex. AI 이미지 추론을 위해 이미지를 업로드 하고, 추론 결과 이미지를 받는 경우 

 

코드 설명

• 1. form을 통해 이미지 객체를 보낸다.
• 2. BE 에서 연산 후 받아온 이미지 객체를 Blob() 으로 수신한다.
• 3. 받은 Blob() 객체를 URL 로 바꿔서 활용하거나, File으로 바꿔서 활용한다.

 const formdata = new FormData();
 formdata.append("content", document.querySelector("#base_img").files[0])
  
 const response = await fetch(`${backend_base_url}/ai/`, {
   method: 'POST',
   body: formdata,
 }).then(response => response.blob())
   .then(function (myBlob) {
    // 1. img를 url로 만들기 
    objectURL = URL.createObjectURL(myBlob);
    // 2. img를 File object로 만들기
    img_path = new File([myBlob], <filename>, myBlob) // File Object
    // 3. img .src 바꾸기
    result_file.src = objectURL;
  })