react-quill 사용할때 이미지 처리 질문있습니다.

Question

react-quill이나, okky처럼 텍스트에디터에 이미지를 삽입해줄수있는 기능같은경우 이미지처리는 어떻게해줘야하나요?본문에 이미지 삽입삽입한 이미지 리사이징이렇게 두가지 기능을 구현하려고하는데요 어렵네요...이미지를 삽입했을때 서버에 예를들면 aws s3에 업로드하는 코드를 작성해주고, url을 서버로부터 혹은 aws s3로부터 받아와서 그 url을 본문에 삽입시켜주는 방식이 가장쉬워보이기는 하는데..이런경우 리사이징 처리는 어떻게해줘야하는지 갈피를 못잡겠습니다.그리고 이렇게 구현했을때 유저가 페이지를 그냥 떠났을때 aws s3 버켓에 올라간 이미지를 삭제해주는 코드를 따로 작성해주는식으로 해줘야하는데 효율이괜찮을까요? 가격이나 이런점에서도..이런 우려가 되어서유저가 글작성버튼을 누르면 이미지도 서버에올라가고 하는식으로 구현하려는데..혹시 참고할만한 예제같은게 없을까요? 아니면 구현하는데 아이디어좀 보태주시면 정말 감사하겠습니다..지금 이미지 본문삽입, 리사이징처리 이런건 구현했는데문제가 .. 이미지를 본문에 삽입했을때const [imgFile,setImgFile)&#61;useState([]); 이런식으로 useState를 하나 작성해서넣어주고,리사이징처리를 해주고있습니다. // 이미지 크기 수정했을 때 const editorFile &#61; () &#61;> { const editor &#61; quillRef?.current?.getEditor(); const editorContent &#61; editor.getContents(); // console.log('editorRef &#61;> ', editorContent.ops[0]); const { attributes, insert } &#61; editorContent.ops[0]; if (attributes) { const image &#61; new Image(); image.src &#61; insert.image; image.height &#61; attributes.width; image.width &#61; attributes.width; image.alt &#61; 'sample'; const { dataUrl, imageBase64 } &#61; getBase64Image(image); const contentType &#61; 'image'; const blob &#61; base64StringToBlob(imageBase64, contentType); const file &#61; new File([blob], image.alt, { type: blob.type }); setImageFile((prev: any) &#61;> [...prev, file]); } // console.log(image); }; 근데 문젠 imgFile의 기존이미지와 리사이징한 이미지가 각각 따로 저장이되어버립니다. setImageFile((prev: any) &#61;> [...prev, file]); 이 코드때문에 그런거는 알겟는데 그래서 file의 name을 찾아서 중복되는 코드에 덮어쓰기한다던가 그런식으로 구현해보려고하는데 도저히 본문에 삽입된 이미지의 name을 얻어오는 방도가없습니다..ㅠㅠㅠ 좀 복잡하고 지저분한 질문글이 된거같은데 혹시 방도가없을까요?

킁킁탐정 · Answer

다음을 참고하시면 도움이 되실겁니다.관련 함수나 단어로 검색하시면 한국 블로그 정보도 많이 찾을 수 있습니다.https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL_statichttps://developer.mozilla.org/en-US/docs/Web/API/File_API/Using_files_from_web_applications#example_using_object_urls_to_display_imageshttps://javascript.plainenglish.io/resize-images-on-the-client-using-javascript-before-uploading-them-17a6484e3a00

react-quill 사용할때 이미지 처리 질문있습니다.

1개의 답변

Q&A 목록