콘텐츠 업데이트 - 커버이미지 추가 및 multipart 방식으로 수정

src/api/audio_content.js

@@ -15,11 +15,24 @@ async function searchAudioContent(searchWord, page){
     )
 }
 
-async function modifyAudioContent(request) {
-    return Vue.axios.put("/creator-admin/audio-content", request)
+async function modifyAudioContent(formData) {
+    return Vue.axios.put("/creator-admin/audio-content", formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    })
+}
+
+async function createAudioContent(formData) {
+    return Vue.axios.post('/audio-content', formData, {
+        headers: {
+            "Content-Type": "multipart/form-data",
+        },
+    });
 }
 
 export {
+    createAudioContent,
     getAudioContentList,
     searchAudioContent,
     modifyAudioContent

src/views/Content/ContentList.vue

@@ -15,9 +15,6 @@
             <template>
               <thead>
                 <tr>
-                  <th class="text-center">
-                    콘텐츠 번호
-                  </th>
                   <th class="text-center">
                     썸네일
                   </th>
@@ -61,7 +58,6 @@
                   v-for="item in audio_contents"
                   :key="item.audioContentId"
                 >
-                  <td>{{ item.audioContentId }}</td>
                   <td align="center">
                     <v-img
                       max-width="100"
@@ -151,6 +147,22 @@
           <v-card-title>
             콘텐츠 수정
           </v-card-title>
+          <div class="image-select">
+            <label for="image">
+              배너 이미지 등록
+            </label>
+            <v-file-input
+              id="image"
+              v-model="audio_content.cover_image"
+              @change="imageAdd"
+            />
+          </div>
+          <img
+            v-if="audio_content.cover_image_url"
+            :src="audio_content.cover_image_url"
+            alt=""
+            class="image-preview"
+          >
           <v-card-text>
             <v-row align="center">
               <v-col cols="4">
@@ -211,22 +223,6 @@
               </v-col>
             </v-row>
           </v-card-text>
-          <v-card-text>
-            <v-row>
-              <v-col cols="4">
-                기본 커버이미지로 변경
-              </v-col>
-              <v-col
-                cols="8"
-                align="left"
-              >
-                <input
-                  v-model="audio_content.is_default_cover_image"
-                  type="checkbox"
-                >
-              </v-col>
-            </v-row>
-          </v-card-text>
           <v-card-actions v-show="!is_loading">
             <v-spacer />
             <v-btn
@@ -292,6 +288,7 @@ export default {
   data() {
     return {
       is_loading: false,
+      show_create_dialog: false,
       show_modify_dialog: false,
       show_delete_confirm_dialog: false,
       page: 1,
@@ -339,8 +336,7 @@ export default {
       this.audio_content.curation_id = item.curationId
       this.audio_content.is_adult = item.isAdult
       this.audio_content.is_comment_available = item.isCommentAvailable
-            this.audio_content.is_default_cover_image = false
-
+      this.audio_content.cover_image_url = item.coverImageUrl
       console.log(this.audio_content)
 
       this.show_modify_dialog = true
@@ -353,6 +349,16 @@ export default {
       this.show_delete_confirm_dialog = false
     },
 
+    imageAdd(payload) {
+      const file = payload;
+      if (file) {
+        this.audio_content.cover_image_url = URL.createObjectURL(file)
+        URL.revokeObjectURL(file)
+      } else {
+        this.audio_content.cover_image_url = null
+      }
+    },
+
     async modify() {
       if (
         this.audio_content.title === null ||
@@ -377,10 +383,8 @@ export default {
       this.isLoading = true
 
       try {
-                const request = {
-                    id: this.audio_content.id,
-                    isDefaultCoverImage: this.audio_content.is_default_cover_image
-                }
+        const formData = new FormData()
+        const request = {id: this.audio_content.id}
 
         if (
           this.selected_audio_content.title !== this.audio_content.title &&
@@ -408,8 +412,13 @@ export default {
           request.isCommentAvailable = this.audio_content.is_comment_available
         }
 
-                console.log(request)
-                const res = await api.modifyAudioContent(request)
+        if (this.audio_content.cover_image !== null) {
+          formData.append("coverImage", this.audio_content.cover_image)
+        }
+
+        formData.append("request", JSON.stringify(request))
+
+        const res = await api.modifyAudioContent(formData)
         if (res.status === 200 && res.data.success === true) {
           this.cancel()
           this.notifySuccess('수정되었습니다.')