Complete attachment upload feature

src/api/attachment.js

@@ -1,3 +1,4 @@
+import axios from 'axios'
 import service from '@/utils/service'
 
 const baseUrl = '/admin/api/attachments'
@@ -26,4 +27,22 @@ attachmentApi.delete = attachmentId => {
   })
 }
 
+attachmentApi.CancelToken = axios.CancelToken
+attachmentApi.isCancel = axios.isCancel
+
+attachmentApi.upload = (formData, uploadProgress, cancelToken) => {
+  return service(
+    {
+      url: `${baseUrl}/upload`,
+      timeout: 8640000, // 24 hours
+      data: formData, // form data
+      onUploadProgress: uploadProgress,
+      method: 'post'
+    },
+    {
+      cancelToken: cancelToken
+    }
+  )
+}
+
 export default attachmentApi

src/views/attachment/AttachmentList.vue

@@ -35,7 +35,8 @@
       <a-upload-dragger
         name="file"
         :multiple="true"
-        action="http://localhost:8090/admin/api/attachments/upload"
+        accept="image/*"
+        :customRequest="handleUpload"
         @change="handleChange"
       >
         <p class="ant-upload-drag-icon">
@@ -217,6 +218,28 @@ export default {
     },
     onChildClose() {
       this.drawerVisible = false
+    },
+    handleUpload(option) {
+      this.$log.debug('Uploading option', option)
+      const CancelToken = attachmentApi.CancelToken
+      const source = CancelToken.source()
+
+      const data = new FormData()
+      data.append('file', option.file)
+      attachmentApi
+        .upload(data, source.token, option.onProgress)
+        .then(response => {
+          option.onSuccess(response, option.file)
+        })
+        .catch(error => {
+          option.onError(error, error.response)
+        })
+
+      return {
+        abort: () => {
+          source.cancel('Upload operation canceled by the user.')
+        }
+      }
     }
   }
 }

src/views/post/PostEdit.vue

@@ -124,7 +124,12 @@
     >
       <a-row type="flex" align="middle">
         <a-col :span="24">
-          <div class="attach-item" v-for="(item, index) in attachments" :key="index" @click="showDetailDrawer(item)">
+          <div
+            class="attach-item"
+            v-for="(item, index) in attachments"
+            :key="index"
+            @click="showDetailDrawer(item)"
+          >
             <img :src="item.thumbPath">
           </div>
         </a-col>