Cavas fetch 에러

사이드 프로젝트 진행 중 s3 upload를 위해 Html을 cavas 로 변환시켜 서버로 보내야 하는데 보내지지 않았다.

정확히는 보내는지는데 서버에서 받지 못했다.

//html2canvas 를 사용해 html to canvas![]
html2canvas(dom).then((canvas) => {
  canvasToblob(canvas)
})

async function canvasToblob(canvas) {
  //cavas to DataURL str
  //let cavasToDataURL = canvas.toDataURL("image/png")
  //DataURL to blob
  let blob = dataURItoBlob(cavasToDataURL)

  //fetch
  let response = await fetch("http://localhost:5000/api/canvas", {
    method: "POST",
    body: blob,
  })

  let result = await response.json()
}

위와 같이 blob 타입, DataURL 두가지 모두 변형해 보내봤는데 200도 떨어지고 페이로드 값을 봐도 정상적으로 나왔다. 떨어지는데 서버에서 받아보면 빈 값이 나왔다.

한참 헤메다 formData를 생성해 formData 로 보내주니 서버에서 제대로 받았다.

async function canvasToblob(canvas) {
  //formData 생성
  let formData = new FormData()
  //DataURL to blob
  let blob = dataURItoBlob(cavasToDataURL)

  formData.append("image", blob)

  //fetch
  let response = await fetch("http://localhost:5000/**", {
    method: "POST",
    body: formData,
  })

  let result = await response.json()
}