프론트엔드 웹/React

dom-to-image를 이용하여 컴포넌트를 jpeg/png 파일로 만든 뒤, formData 형식으로 API Post하기

세리둥절 2023. 5. 25. 12:06
반응형
const ref = useRef<HTMLDivElement>(null);
const onSubmitImage = async (ref: any) => {
      const formData = new FormData()
      const image = await domtoimage.toBlob(ref.current);
      const myFile = new File([image], 'image.jpeg', {
          type: image.type,
      });
      formData.append("fileCategory", "INSIGHT_ATTACHED_FILE")
      formData.append("targetFile", myFile)

      return axios
        .post('image-upload-url', formData, {
            headers: {  
                'Content-Type': 'multipart/form-data',
                'Authorization': `Bearer ${token}`
            },
        })
        .then((res) => { console.log(res) });
    }

...
return (
	<>
        <ImageContainer ref={ref}>
            <Bar/>
        </ImageContainer>
        <button onClick={() => onSubmitImage(ref)}>Image Submit</button>
    </>
)
반응형