반응형
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>
</>
)
반응형
'프론트엔드 웹 > React' 카테고리의 다른 글
마우스휠 사용하는 Swiper에서 특정 SwiperSlide에서는 마우스휠 멈추기 (0) | 2023.06.14 |
---|---|
addEventLister scroll / wheel (0) | 2023.06.14 |
React svg 파일 색깔 변경 (color change) (0) | 2023.05.04 |
React Image Component Export to PNG/JPEG/SVG (0) | 2023.05.03 |
React에서 svg file 사용하는 방법 (0) | 2023.05.03 |