q 에디터 수정

src/components/editor/QEditor.vue

@@ -79,7 +79,6 @@ onMounted(() => {
             syntax: true,
         },
     });
-
     quillInstance.format('font', font.value);
     quillInstance.format('size', fontSize.value);
 
@@ -91,15 +90,12 @@ onMounted(() => {
         quillInstance.format('font', font.value);
         quillInstance.format('size', fontSize.value);
     });
-
+    // 이미지 업로드 
-    // 이미지 업로드 및 삭제 감지 로직
-    // 아직 서버에 실험 안해봄 ***********처리부탁***********
     let imageUrls = new Set();
 
     quillInstance.getModule('toolbar').addHandler('image', () => {
         selectLocalImage();
     });
-
     quillInstance.on('text-change', (delta, oldDelta, source) => {
         emit('update:data', quillInstance.root.innerHTML);
         delta.ops.forEach(op => {
@@ -112,7 +108,7 @@ onMounted(() => {
         });
     });
 
-    function selectLocalImage() {
+    async function selectLocalImage() {
         const input = document.createElement('input');
         input.setAttribute('type', 'file');
         input.setAttribute('accept', 'image/*');
@@ -121,24 +117,33 @@ onMounted(() => {
         input.onchange = () => {
             const file = input.files[0];
             if (file) {
-                const reader = new FileReader();
+                const formData = new FormData();
-                reader.onload = async (e) => {
+                formData.append('file', file);
-                    const range = quillInstance.getSelection();
-                    const base64Image = e.target.result;
 
-                    try {
+                uploadImageToServer(formData).then(serverImageUrl => {
-                        const serverImageUrl = await uploadImageToServer(base64Image);
+                    const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
-                        quillInstance.insertEmbed(range.index, 'image', serverImageUrl);
+                    const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
-                        imageUrls.add(serverImageUrl);
+
-                    } catch (error) {
+                    const range = quillInstance.getSelection();
-                        console.error('이미지 업로드 중 오류 발생:', error);
+                    quillInstance.insertEmbed(range.index, 'image', fullImageUrl);
-                    }
+
-                };
+                    imageUrls.add(fullImageUrl);
-                reader.readAsDataURL(file);
+                }).catch(e => {
+                    toastStore.onToast('잠시후 다시 시도해주세요.', 'e');               
+                });
             }
         };
     }
-
+    async function uploadImageToServer(formData) {
+        try {
+            const response = await $api.post('img/upload', formData, { isFormData: true });
+            const imageUrl = response.data.data;  
+            return imageUrl;  
+        } catch (error) {
+            toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
+            throw error;
+        }
+    }
 
     function checkForDeletedImages() {
         const editorImages = document.querySelectorAll('#editor img');
@@ -147,33 +152,9 @@ onMounted(() => {
         imageUrls.forEach(url => {
             if (!currentImages.has(url)) {
                 imageUrls.delete(url);
-                removeImageFromServer(url);
             }
         });
     }
-
-    async function uploadImageToServer(base64Image) {
-        try {
-            const response = await $api.post('/img/upload', {
-                image: base64Image,
-            });
-            return response.data.url; // 서버에서 반환한 이미지 URL
-        } catch (error) {
-            console.error('서버 업로드 중 오류 발생:', error);
-            throw error;
-        }
-    }
-
-    async function removeImageFromServer(imageUrl) {
-        try {
-            await $api.delete('/img/delete', {
-                data: { url: imageUrl },
-            });
-            console.log(`서버에서 이미지 삭제: ${imageUrl}`);
-        } catch (error) {
-            console.error('서버 이미지 삭제 중 오류 발생:', error);
-        }
-    }
 });
 
 </script>