Refactor attachment upload

src/views/attachment/AttachmentList.vue

@@ -1,17 +1,30 @@
 <template>
   <page-view>
-    <a-row :gutter="12" type="flex" align="middle">
+    <a-row
-      <a-col :span="24" class="search-box">
+      :gutter="12"
+      type="flex"
+      align="middle"
+    >
+      <a-col
+        :span="24"
+        class="search-box"
+      >
         <a-card :bordered="false">
           <div class="table-page-search-wrapper">
             <a-form layout="inline">
               <a-row :gutter="48">
-                <a-col :md="6" :sm="24">
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
                   <a-form-item label="关键词">
                     <a-input v-model="queryParam.keyword" />
                   </a-form-item>
                 </a-col>
-                <a-col :md="6" :sm="24">
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
                   <a-form-item label="年月份">
                     <a-select placeholder="请选择年月">
                       <a-select-option value="2019-01">2019-01</a-select-option>
@@ -20,24 +33,40 @@
                     </a-select>
                   </a-form-item>
                 </a-col>
-                <a-col :md="6" :sm="24">
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
                   <a-form-item label="类型">
                     <a-select placeholder="请选择类型">
                       <a-select-option value="image/png">image/png</a-select-option>
                     </a-select>
                   </a-form-item>
                 </a-col>
-                <a-col :md="6" :sm="24">
+                <a-col
+                  :md="6"
+                  :sm="24"
+                >
                   <span class="table-page-search-submitButtons">
-                    <a-button type="primary" @click="loadAttachments">查询</a-button>
+                    <a-button
-                    <a-button style="margin-left: 8px;" @click="resetParam">重置</a-button>
+                      type="primary"
+                      @click="loadAttachments"
+                    >查询</a-button>
+                    <a-button
+                      style="margin-left: 8px;"
+                      @click="resetParam"
+                    >重置</a-button>
                   </span>
                 </a-col>
               </a-row>
             </a-form>
           </div>
           <div class="table-operator">
-            <a-button type="primary" icon="plus" @click="showUploadModal">上传</a-button>
+            <a-button
+              type="primary"
+              icon="plus"
+              @click="showUploadModal"
+            >上传</a-button>
           </div>
         </a-card>
       </a-col>
@@ -51,7 +80,11 @@
         :sm="12"
         :xs="24"
       >
-        <a-card :bodyStyle="{ padding: 0 }" hoverable @click="showDetailDrawer(attachment)">
+        <a-card
+          :bodyStyle="{ padding: 0 }"
+          hoverable
+          @click="showDetailDrawer(attachment)"
+        >
           <div class="attach-thumb">
             <img :src="attachment.thumbPath">
           </div>
@@ -61,7 +94,10 @@
         </a-card>
       </a-col>
     </a-row>
-    <a-row type="flex" justify="end">
+    <a-row
+      type="flex"
+      justify="end"
+    >
       <a-pagination
         :total="pagination.total"
         :defaultPageSize="pagination.size"
@@ -71,19 +107,23 @@
         @showSizeChange="handlePaginationChange"
       />
     </a-row>
-    <a-modal title="上传附件" v-model="uploadVisible" :footer="null">
+    <a-modal
-      <a-upload-dragger
+      title="上传附件"
+      v-model="uploadVisible"
+      :footer="null"
+    >
+      <upload
         name="file"
-        :multiple="true"
+        multiple
-        :customRequest="handleUpload"
+        :uploadHandler="uploadHandler"
-        @change="handleChange"
+        @success="handleUploadSuccess"
       >
         <p class="ant-upload-drag-icon">
           <a-icon type="inbox" />
         </p>
         <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
         <p class="ant-upload-hint">支持单个或批量上传</p>
-      </a-upload-dragger>
+      </upload>
     </a-modal>
     <a-drawer
       v-if="selectAttachment"
@@ -94,9 +134,16 @@
       destroyOnClose
       @close="onChildClose"
     >
-      <a-row type="flex" align="middle">
+      <a-row
+        type="flex"
+        align="middle"
+      >
         <a-col :span="24">
-          <a-skeleton active :loading="detailLoading" :paragraph="{rows: 8}">
+          <a-skeleton
+            active
+            :loading="detailLoading"
+            :paragraph="{rows: 8}"
+          >
             <div class="attach-detail-img">
               <img :src="selectAttachment.path">
             </div>
@@ -104,17 +151,33 @@
         </a-col>
         <a-divider />
         <a-col :span="24">
-          <a-skeleton active :loading="detailLoading" :paragraph="{rows: 8}">
+          <a-skeleton
+            active
+            :loading="detailLoading"
+            :paragraph="{rows: 8}"
+          >
             <a-list itemLayout="horizontal">
               <a-list-item>
                 <a-list-item-meta>
-                  <template slot="description" v-if="editable">
+                  <template
-                    <a-input v-model="selectAttachment.name" @blur="updateAttachment"/>
+                    slot="description"
+                    v-if="editable"
+                  >
+                    <a-input
+                      v-model="selectAttachment.name"
+                      @blur="updateAttachment"
+                    />
                   </template>
-                  <template slot="description" v-else>{{ selectAttachment.name }}</template>
+                  <template
+                    slot="description"
+                    v-else
+                  >{{ selectAttachment.name }}</template>
                   <span slot="title">
                     附件名：
-                    <a-icon type="edit" @click="handleEditName"/>
+                    <a-icon
+                      type="edit"
+                      @click="handleEditName"
+                    />
                   </span>
                 </a-list-item-meta>
               </a-list-item>
@@ -142,17 +205,21 @@
                 <a-list-item-meta :description="selectAttachment.path">
                   <span slot="title">
                     普通链接：
-                    <a-icon type="copy" @click="doCopyNormalLink"/>
+                    <a-icon
+                      type="copy"
+                      @click="doCopyNormalLink"
+                    />
                   </span>
                 </a-list-item-meta>
               </a-list-item>
               <a-list-item>
-                <a-list-item-meta
+                <a-list-item-meta :description="'!['+selectAttachment.name+']('+selectAttachment.path+')'">
-                  :description="'!['+selectAttachment.name+']('+selectAttachment.path+')'"
-                >
                   <span slot="title">
                     Markdown 格式：
-                    <a-icon type="copy" @click="doCopyMarkdownLink"/>
+                    <a-icon
+                      type="copy"
+                      @click="doCopyMarkdownLink"
+                    />
                   </span>
                 </a-list-item-meta>
               </a-list-item>
@@ -202,7 +269,8 @@ export default {
         size: 18,
         sort: null,
         keyword: null
-      }
+      },
+      uploadHandler: attachmentApi.upload
     }
   },
   created() {
@@ -237,6 +305,9 @@ export default {
         this.$message.error(`${info.file.name} 文件上传失败`)
       }
     },
+    handleUploadSuccess() {
+      this.loadAttachments()
+    },
     deleteAttachment(id) {
       attachmentApi.delete(id).then(response => {
         this.$message.success('删除成功！')
@@ -277,39 +348,6 @@ export default {
       this.pagination.size = size
       this.loadAttachments()
     },
-    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,
-          progressEvent => {
-            if (progressEvent.total > 0) {
-              progressEvent.percent = (progressEvent.loaded / progressEvent.total) * 100
-            }
-            this.$log.debug('Uploading percent: ', progressEvent.percent)
-            option.onProgress(progressEvent)
-          },
-          source.token
-        )
-        .then(response => {
-          option.onSuccess(response, option.file)
-          this.loadAttachments()
-        })
-        .catch(error => {
-          option.onError(error, error.response)
-        })
-
-      return {
-        abort: () => {
-          source.cancel('Upload operation canceled by the user.')
-        }
-      }
-    },
     handleEditName() {
       this.editable = !this.editable
     },