kasumil의 코딩 공작소

작동 로직은 이러합니다. 1. 유저가 dropzone에 사진 드랍 후 제목, 내용 작성 2. 게시글 업로드 저장 버튼 클릭(dropzone이 보내는 이미지는 base64라서 그냥 db 저장 불가.) 3. 이미지 서버로 이미지 업로드 후 성공시 url 주소 가져옴. 4. url 주소를 db 서버에 보내기 +++ 이전 로직에 없던 부분이 파일 업로드 체크... 그리고 하다보니 1개를 넘어가면 기존 파일을 삭제하고 다시 업로드 되는 부분도 없어졌더라;; 해당 부분 복구 끝. Dropzone.options.fileDropzone = { url: '이미지 서버주소', //업로드할 url (ex)컨트롤러) init: function () { /* 최초 dropzone 설정시 init을 통해 호출 */ let myD..

작동 로직은 이러합니다. 1. 유저가 dropzone에 사진 드랍 후 제목, 내용 작성 2. 게시글 업로드 저장 버튼 클릭(dropzone이 보내는 이미지는 base64라서 그냥 db 저장 불가.) 3. 이미지 서버로 이미지 업로드 후 성공시 url 주소 가져옴. 4. url 주소를 db 서버에 보내기 이전에 올려놓은 라이브러리 주소 참고하도록 하시고, 스크립트 로직을 구현해 보았습니다. 다들 form데이터에 같이 보내거나 이상하게 hidden으로 넘기고 그러고 있길래, 내 경우 img 서버 주소와 db 저장 주소가 다르기도 하고 그러다보니 쪼갤 필요가 있어 그냥 고민해보다가 이렇게 만들어 봄. 특이하게도 init 안에 넣어놔야 이렇게 구동되는 방식인 듯 싶습니다. image는 그냥 이미지 서버에서 쓸 ..

흔히들 보는 이미지 업로드 방식은 바로 input을 이용한 방식일 것이다. 대충 만들었다. 다들 이렇게 해서 파일을 보내리라고 본다. 내가 기존에 작성한 toast ui 업로드 방식에서 이미지서버가 아닌 move file을 이용한 업로드를 구현해야했다. 그러다보니 기존 blob을 사용해야하는데 input에서는 작동하지 않는다.... 이를 위해서 blob으로 바꿔줘야 했다. let file = $('#file').prop("files")[0]; // input file에서 데이터 뽑는 방법 let tmp = new Blob([file], { type: `${file.type}` }); // 타입은 동적으로 보내서 감지할 수 있게 했음. let formData = new FormData(); formData..

https://github.com/nhn/tui.editor GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. - GitHub - nhn/tui.editor: 🍞📝 Markdown WYSIWYG Editor. GFM Standard + Chart & UML Extensible. github.com https://nhn.github.io/tui.editor/latest/ https://nhn.github.io/tui.editor/latest/ 🚩 Table of Content..