사이드 프로젝트 진행 중 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()
}