이미지 업로드 전 미리보기 구현
const [currentComment, setCurrentComment] = useState("");
const [imgBase64, setImgBase64] = useState("");
// 파일 미리보기 부분
const fileHandler = (e) => {
let reader = new FileReader();
reader.onloadend = () => {
const base64 = reader.result;
console.log(reader.result);
if (base64) {
setImgBase64(base64.toString());
}
};
if (e.target.files[0]) {
reader.readAsDataURL(e.target.files[0]);
setCurrentFile(e.target.files[0]);
}
};
// 파일, comment 전송 부분
const PostCommnet = () => {
const formData = new FormData();
formData.append("user_id", 1);
formData.append("file", currentFile, currentFile.name);
formData.append("content", currentComment);
axios
.post(APIPOST, formData, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((res) => {
setImageUrl(res.data.image_url);
})
.then(() => {
setCurrentFile([]);
setCurrentComment("");
})
.catch((err) => {
console.log(err);
});
};
fileReader로 img파일의 결과를 toString()
axios를 이용한 formData 전송
console.log(render)의 결과
Author And Source
이 문제에 관하여(이미지 업로드 전 미리보기 구현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@beginal/이미지-업로드-전-미리보기-구현저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)