@@ -16,7 +16,7 @@
@@ -26,7 +26,7 @@
diff --git a/src/components/editor/QEditor.vue b/src/components/editor/QEditor.vue
index 4f4132e..86deeba 100644
--- a/src/components/editor/QEditor.vue
+++ b/src/components/editor/QEditor.vue
@@ -71,7 +71,8 @@
const editor = ref(null); // 에디터 DOM 참조
const font = ref('nanum-gothic'); // 기본 폰트
const fontSize = ref('16px'); // 기본 폰트 크기
- const emit = defineEmits(['update:data']);
+ const emit = defineEmits(['update:data', 'update:uploadedImgList']);
+ const uploadedImgList = ref([]); // 에디터에 이미지 첨부시 업데이트 된 파일 인덱스 번호 리스트
onMounted(() => {
// 툴바에서 선택할 수 있는 폰트 목록 설정
@@ -112,6 +113,13 @@
quillInstance.format('size', fontSize.value);
});
+ // 이미지 첨부 리스트가 변경 되었을때
+ watch(uploadedImgList, () => {
+ console.log(!23);
+ emit('update:uploadedImgList', uploadedImgList.value);
+ console.log('uploadedImgList.value: ', uploadedImgList.value);
+ });
+
// 초기 데이터가 있을 경우, HTML 형식으로 삽입
if (props.initialData) {
quillInstance.setContents(JSON.parse(props.initialData));
@@ -150,7 +158,15 @@
// 이미지 서버에 업로드 후 URL 받기
uploadImageToServer(formData)
- .then(serverImageUrl => {
+ .then(data => {
+ const uploadImgIdx = data?.fileIndex; // 업로드 된 파일 DB 인덱스
+ const serverImageUrl = data?.fileUrl; // 업로드 된 파일 url
+
+ // 업로드 된 파일 인덱스 (게시글 저장 시 해당 인덱스 번호에 게시글 인덱스를 업데이트)
+ if (uploadImgIdx) {
+ uploadedImgList.value = [...uploadedImgList.value, uploadImgIdx];
+ }
+
const baseUrl = $api.defaults.baseURL.replace(/api\/$/, '');
const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`;
@@ -168,40 +184,40 @@
// 이미지 서버 업로드
async function uploadImageToServer(formData) {
- try {
- // Make the POST request to upload the image
- const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
+ try {
+ // Make the POST request to upload the image
+ const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
- // Check if the response contains the expected data
- if (response.data && response.data.data) {
- const imageUrl = response.data.data;
- return imageUrl; // Return the image URL received from the server
- } else {
- throw new Error('Image URL not returned from server');
+ // Check if the response contains the expected data
+ if (response.data && response.data.data) {
+ const imageUrl = response.data.data;
+ return imageUrl; // Return the image URL received from the server
+ } else {
+ throw new Error('Image URL not returned from server');
+ }
+ } catch (error) {
+ // Log detailed error information for debugging purposes
+ console.error('Image upload failed:', error);
+
+ // Handle specific error cases (e.g., network issues, authorization issues)
+ if (error.response) {
+ // If the error is from the server (e.g., 4xx or 5xx error)
+ console.error('Error response:', error.response.data);
+ toastStore.onToast('서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'e');
+ } else if (error.request) {
+ // If no response is received from the server
+ console.error('No response received:', error.request);
+ toastStore.onToast('네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'e');
+ } else {
+ // If the error is due to something else (e.g., invalid request setup)
+ console.error('Error message:', error.message);
+ toastStore.onToast('파일 업로드 중 문제가 발생했습니다. 다시 시도해주세요.', 'e');
+ }
+
+ // Throw the error so the caller knows something went wrong
+ throw error;
+ }
}
- } catch (error) {
- // Log detailed error information for debugging purposes
- console.error('Image upload failed:', error);
-
- // Handle specific error cases (e.g., network issues, authorization issues)
- if (error.response) {
- // If the error is from the server (e.g., 4xx or 5xx error)
- console.error('Error response:', error.response.data);
- toastStore.onToast('서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'e');
- } else if (error.request) {
- // If no response is received from the server
- console.error('No response received:', error.request);
- toastStore.onToast('네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'e');
- } else {
- // If the error is due to something else (e.g., invalid request setup)
- console.error('Error message:', error.message);
- toastStore.onToast('파일 업로드 중 문제가 발생했습니다. 다시 시도해주세요.', 'e');
- }
-
- // Throw the error so the caller knows something went wrong
- throw error;
- }
-}
// 삭제된 이미지 확인
function checkForDeletedImages() {
@@ -216,4 +232,3 @@
}
});
-
diff --git a/src/components/input/FormInput.vue b/src/components/input/FormInput.vue
index 931ff2e..7c1da23 100644
--- a/src/components/input/FormInput.vue
+++ b/src/components/input/FormInput.vue
@@ -19,6 +19,9 @@
@focusout="$emit('focusout', modelValue)"
@input="handleInput"
/>
+