이미지 업로드 전 미리보기 구현

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)의 결과

좋은 웹페이지 즐겨찾기