리액트에서 CK에디터를 사용해서 이미지 업로드 후 용량제한 걸리고 사진이 에디터에서 사라지게 하고싶은데 안되네요...

Question

리액트에서 CK에디터를 사용해서 이미지 업로드 후 용량제한 걸리고 사진이 에디터에서 사라지게 하고싶은데 안되네요...사진이 사라져야하는데 사라지지않고 그냥 떡하니 그대로 있네요 어떻게 해결하면 좋을까요?? 조언 부탁드립니다.import React, { useEffect, useState } from "react"; import "./ForumCreate.css"; // import Editor from './Editor'; import parse from "html-react-parser"; import axios from "axios"; import { CKEditor } from "@ckeditor/ckeditor5-react"; import ClassicEditor from "@ckeditor/ckeditor5-build-classic"; import ForumImageUpload from "./ForumImageUpload"; import Images from "./Forumimage"; import { createBrowserHistory } from "history"; export const history = createBrowserHistory(); // type ForumTypes = { // title: any, // content: any, // } function ForumCreate() { const [forumtitle, setforumTitle] = useState(""); const [forumcontent, setforumContent] = useState(""); const [forumcategory, setCategory] = useState([]); const [forummember, setMember] = useState(null); const [forumsigun, setSigun] = useState(null); const [forumimage, setImage] = useState(new FormData()); const [saveFileNameArr, setSaveFileNameArr] = useState([""]); // 페이지 이동 시 경고창1안 window.addEventListener("beforeunload", (event) => { event.preventDefault(); let check = (event.returnValue = "Are you sure you want to leave? Your post will be lost."); console.log("이벤트 발생"); //삭제 함수 }); const forumdata = { title: forumtitle, content: forumcontent, sigunguIdList: [1, 2, 3], memberId: 1, categoryList: ["85", "82", "75"], //upload: new FormData(), // 'image_file' : ${Image.name}, }; const customUploadAdapter = (loader: any) => { return { upload() { return new Promise((resolve, reject) => { const upload = new FormData(); loader.file.then((file: any) => { if (file.size > 1024 * 1024 * 1) { alert("1MB 이하의 이미지만 업로드 가능합니다."); //사진 용량 제한 return; // 용량 제한으로 업로드가 되지 않는 사진의 처리가 필요한 부분 같습니다. } upload.append("upload", file); axios .post("/api/post", upload) .then((res) => { console.log("사진 업로드 성공"); console.log(file); //setSaveFileNameArr([...saveFileNameArr, file.name]); // if (!flag) { // setFlag(true); // setFlagImage(res.data.filename); // } resolve({ default: `testLink/${file.name}`, }); setSaveFileNameArr((prev) => [...prev, `testLink/${file.name}`]); }) .catch((err) => { console.log("사진 업로드 실패"); reject(err); }); }); }); }, }; }; const submitPost = () => { console.log("제출함수"); let res: any = parse(forumcontent); console.log(res.props.children); let nowFileArr = [""]; let deleteFileArr = []; for (let i = 0; i < res.props.children.length; i++) { if (res.props.children[i].props && res.props.children[i].props.src != undefined) { nowFileArr.push(res.props.children[i].props.src); } } for (let i = 0; i < saveFileNameArr.length; i++) { if (!nowFileArr.includes(saveFileNameArr[i])) { deleteFileArr.push(saveFileNameArr[i]); } } }; function uploadPlugin(editor: any) { editor.plugins.get("FileRepository").createUploadAdapter = (loader: any) => { return customUploadAdapter(loader); }; } return ( <>

setforumTitle(event.target.value)} />

{ console.log("Editor is ready to use!", editor); }} onChange={(event: any, editor: any) => { const data = editor.getData(); setforumContent(data); // setImage(data); // console.log({ data }); console.log("onChange"); console.log(event); console.log(editor); }} onBlur={(event: any, editor: any) => {}} onFocus={(event: any, editor: any) => {}} />

); } export default ForumCreate;

merida · Answer

이미지 사이즈가 1mb보다 클 때도 에러 케이스에 해당되므로 alert("1MB 이하의 이미지만 업로드 가능합니다."); 밑에 reject()를 넣어 catch로 유도하면 됩니다.

리액트에서 CK에디터를 사용해서 이미지 업로드 후 용량제한 걸리고 사진이 에디터에서 사라지게 하고싶은데 안되네요...

1개의 답변

#ckeditor5 목록