Refactor upload component.

package.json

@@ -13,6 +13,8 @@
     "ant-design-vue": "^1.3.16",
     "axios": "^0.18.0",
     "enquire.js": "^2.1.6",
+    "filepond": "^4.6.1",
+    "filepond-plugin-image-preview": "^4.4.0",
     "halo-editor": "^2.7.6",
     "marked": "^0.6.3",
     "moment": "^2.24.0",
@@ -22,6 +24,7 @@
     "vue-clipboard2": "^0.3.0",
     "vue-codemirror-lite": "^1.0.4",
     "vue-count-to": "^1.0.13",
+    "vue-filepond": "^5.1.3",
     "vue-ls": "^3.2.1",
     "vue-router": "^3.1.2",
     "vue-video-player": "^5.0.2",

src/api/backup.js

@@ -6,7 +6,7 @@ const backupApi = {}
 
 backupApi.importMarkdown = (formData, uploadProgress, cancelToken) => {
   return service({
-    url: `${baseUrl}/import/markdowns`,
+    url: `${baseUrl}/import/markdown`,
     timeout: 8640000, // 24 hours
     data: formData, // form data
     onUploadProgress: uploadProgress,

src/api/post.js

@@ -66,6 +66,13 @@ postApi.delete = postId => {
   })
 }
 
+postApi.preview = postId => {
+  return service({
+    url: `${baseUrl}/preview/${postId}`,
+    method: 'get'
+  })
+}
+
 postApi.postStatus = {
   PUBLISHED: {
     color: 'green',

src/api/sheet.js

@@ -61,6 +61,13 @@ sheetApi.delete = sheetId => {
   })
 }
 
+sheetApi.preview = sheetId => {
+  return service({
+    url: `${baseUrl}/preview/${sheetId}`,
+    method: 'get'
+  })
+}
+
 sheetApi.sheetStatus = {
   PUBLISHED: {
     color: 'green',

src/components/Upload/FilePondUpload.vue

@@ -0,0 +1,132 @@
+<template>
+  <div>
+    <file-pond
+      ref="pond"
+      :label-idle="label"
+      :name="name"
+      :allow-multiple="multiple"
+      :allowRevert="false"
+      :accepted-file-types="accept"
+      :maxParallelUploads="options.attachment_upload_max_parallel_uploads"
+      :allowImagePreview="options.attachment_upload_image_preview_enable"
+      :maxFiles="options.attachment_upload_max_files"
+      labelFileProcessing="上传中"
+      labelFileProcessingComplete="上传完成"
+      labelFileProcessingAborted="取消上传"
+      labelFileProcessingError="上传错误"
+      labelTapToCancel="点击取消"
+      labelTapToRetry="点击重试"
+      :files="fileList"
+      :server="server"
+      @init="handleFilePondInit"
+    >
+    </file-pond>
+  </div>
+</template>
+<script>
+import { mapGetters } from 'vuex'
+import axios from 'axios'
+
+import vueFilePond from 'vue-filepond'
+import 'filepond/dist/filepond.min.css'
+
+// Plugins
+import FilePondPluginImagePreview from 'filepond-plugin-image-preview'
+import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css'
+
+// Create component and regist plugins
+const FilePond = vueFilePond(FilePondPluginImagePreview)
+export default {
+  name: 'FilePondUpload',
+  components: {
+    FilePond
+  },
+  props: {
+    name: {
+      type: String,
+      required: false,
+      default: 'file'
+    },
+    filed: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    accept: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    label: {
+      type: String,
+      required: false,
+      default: '点击选择文件或将文件拖拽到此处'
+    },
+    uploadHandler: {
+      type: Function,
+      required: true
+    }
+  },
+  data: function() {
+    return {
+      server: {
+        process: (fieldName, file, metadata, load, error, progress, abort) => {
+          const formData = new FormData()
+          formData.append(fieldName, file, file.name)
+
+          const CancelToken = axios.CancelToken
+          const source = CancelToken.source()
+
+          this.uploadHandler(
+            formData,
+            progressEvent => {
+              if (progressEvent.total > 0) {
+                progress(progressEvent.lengthComputable, progressEvent.loaded, progressEvent.total)
+              }
+            },
+            source.token,
+            this.filed,
+            file
+          )
+            .then(response => {
+              load(response)
+              this.$log.debug('Uploaded successfully', response)
+              this.$emit('success', response, file)
+            })
+            .catch(failure => {
+              this.$log.debug('Failed to upload file', failure)
+              this.$emit('failure', failure, file)
+              error()
+            })
+          return {
+            abort: () => {
+              abort()
+              this.$log.debug('Upload operation aborted by the user')
+              source.cancel('Upload operation canceled by the user.')
+            }
+          }
+        }
+      },
+      fileList: []
+    }
+  },
+  computed: {
+    ...mapGetters(['options'])
+  },
+  methods: {
+    handleFilePondInit() {
+      console.log('FilePond has initialized')
+    },
+    handleClearFileList() {
+      this.$refs.pond.removeFiles()
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+</style>

src/components/Upload/UpdateTheme.vue

@@ -1,110 +0,0 @@
-<template>
-  <div>
-    <a-upload-dragger
-      v-if="draggable"
-      :name="name"
-      :accept="accept"
-      :customRequest="handleUpload"
-      :remove="handleRemove"
-      @change="handleChange"
-    >
-      <slot
-        role="button"
-        class="ant-upload ant-upload-btn"
-      />
-    </a-upload-dragger>
-    <a-upload
-      v-else
-      :name="name"
-      :accept="accept"
-      :customRequest="handleUpload"
-      :remove="handleRemove"
-      @change="handleChange"
-    >
-      <slot />
-    </a-upload>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  name: 'UpdateTheme',
-  props: {
-    name: {
-      type: String,
-      required: false,
-      default: 'file'
-    },
-    themeId: {
-      type: String,
-      required: true
-    },
-    draggable: {
-      type: Boolean,
-      required: false,
-      default: true
-    },
-    accept: {
-      type: String,
-      required: false,
-      default: ''
-    },
-    uploadHandler: {
-      type: Function,
-      required: true
-    }
-  },
-  methods: {
-    handleChange(info) {
-      this.$emit('change', info)
-    },
-    handleRemove(file) {
-      this.$log.debug('Removed file', file)
-      this.$emit('remove', file)
-    },
-    handleUpload(option) {
-      this.$log.debug('Uploading option', option)
-      const CancelToken = axios.CancelToken
-      const source = CancelToken.source()
-
-      const data = new FormData()
-      data.append(this.name, option.file)
-
-      this.uploadHandler(
-        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,
-        this.themeId,
-        option.file
-      )
-        .then(response => {
-          this.$log.debug('Uploaded successfully', response)
-          option.onSuccess(response, option.file)
-          this.$emit('success', response, option.file)
-        })
-        .catch(error => {
-          this.$log.debug('Failed to upload file', error)
-          option.onError(error, error.response)
-          this.$emit('failure', error, option.file)
-        })
-      return {
-        abort: () => {
-          this.$log.debug('Upload operation aborted by the user')
-          source.cancel('Upload operation canceled by the user.')
-        }
-      }
-    }
-  }
-}
-</script>
-
-<style>
-</style>

src/components/index.js

@@ -4,13 +4,13 @@ import Vue from 'vue'
 import Ellipsis from '@/components/Ellipsis'
 import FooterToolbar from '@/components/FooterToolbar'
 import Upload from '@/components/Upload/Upload'
-import UpdateTheme from '@/components/Upload/UpdateTheme'
+import FilePondUpload from '@/components/Upload/FilePondUpload'
 
 const _components = {
   Ellipsis,
   FooterToolbar,
   Upload,
-  UpdateTheme
+  FilePondUpload
 }
 
 const components = {}

src/store/modules/option.js

@@ -3,7 +3,12 @@ import {
   OPTIONS
 } from '@/store/mutation-types'
 import optionApi from '@/api/option'
-const keys = ['blog_url']
+const keys = [
+  'blog_url',
+  'attachment_upload_image_preview_enable',
+  'attachment_upload_max_parallel_uploads',
+  'attachment_upload_max_files'
+]
 const option = {
   state: {
     options: []

src/views/attachment/AttachmentList.vue

@@ -136,18 +136,12 @@
       v-model="uploadVisible"
       :footer="null"
       :afterClose="onUploadClose"
+      destroyOnClose
     >
-      <upload
+      <FilePondUpload
-        name="file"
+        ref="upload"
-        multiple
         :uploadHandler="uploadHandler"
-      >
+      ></FilePondUpload>
-        <p class="ant-upload-drag-icon">
-          <a-icon type="inbox" />
-        </p>
-        <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
-        <p class="ant-upload-hint">支持单个或批量上传</p>
-      </upload>
     </a-modal>
     <AttachmentDetailDrawer
       v-model="drawerVisible"
@@ -193,8 +187,8 @@ export default {
         mediaType: null,
         attachmentType: null
       },
-      uploadHandler: attachmentApi.upload,
+      drawerVisible: false,
-      drawerVisible: false
+      uploadHandler: attachmentApi.upload
     }
   },
   computed: {
@@ -260,6 +254,7 @@ export default {
       this.loadAttachments()
     },
     onUploadClose() {
+      this.$refs.upload.handleClearFileList()
       this.loadAttachments()
       this.loadMediaTypes()
     },

src/views/attachment/components/AttachmentDrawer.vue

@@ -70,18 +70,12 @@
       v-model="uploadVisible"
       :footer="null"
       :afterClose="onUploadClose"
+      destroyOnClose
     >
-      <upload
+      <FilePondUpload
-        name="file"
+        ref="upload"
-        multiple
+        :uploadHandler="uploadHandler"
-        :uploadHandler="attachmentUploadHandler"
+      ></FilePondUpload>
-      >
-        <p class="ant-upload-drag-icon">
-          <a-icon type="inbox" />
-        </p>
-        <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
-        <p class="ant-upload-hint">支持单个或批量上传</p>
-      </upload>
     </a-modal>
   </div>
 </template>
@@ -128,7 +122,7 @@ export default {
       },
       attachments: [],
       selectedAttachment: {},
-      attachmentUploadHandler: attachmentApi.upload
+      uploadHandler: attachmentApi.upload
     }
   },
   computed: {
@@ -183,6 +177,7 @@ export default {
       this.loadAttachments()
     },
     onUploadClose() {
+      this.$refs.upload.handleClearFileList()
       this.loadSkeleton()
       this.loadAttachments()
     },

src/views/attachment/components/AttachmentSelectDrawer.vue

@@ -67,18 +67,12 @@
       v-model="uploadVisible"
       :footer="null"
       :afterClose="onUploadClose"
+      destroyOnClose
     >
-      <upload
+      <FilePondUpload
-        name="file"
+        ref="upload"
-        multiple
+        :uploadHandler="uploadHandler"
-        :uploadHandler="attachmentUploadHandler"
+      ></FilePondUpload>
-      >
-        <p class="ant-upload-drag-icon">
-          <a-icon type="inbox" />
-        </p>
-        <p class="ant-upload-text">点击选择文件或将文件拖拽到此处</p>
-        <p class="ant-upload-hint">支持单个或批量上传</p>
-      </upload>
     </a-modal>
   </div>
 </template>
@@ -126,7 +120,7 @@ export default {
         sort: ''
       },
       attachments: [],
-      attachmentUploadHandler: attachmentApi.upload
+      uploadHandler: attachmentApi.upload
     }
   },
   created() {
@@ -174,6 +168,7 @@ export default {
       this.loadAttachments()
     },
     onUploadClose() {
+      this.$refs.upload.handleClearFileList()
       this.loadSkeleton()
       this.loadAttachments()
     },

src/views/comment/components/CommentTab.vue

@@ -235,6 +235,7 @@
       :title="'回复给：'+selectComment.author"
       v-model="replyCommentVisible"
       @close="onReplyClose"
+      destroyOnClose
     >
       <template slot="footer">
         <a-button

src/views/interface/ThemeList.vue

@@ -162,8 +162,10 @@
     <a-modal
       title="安装主题"
       v-model="uploadThemeVisible"
+      destroyOnClose
       :footer="null"
       :bodyStyle="{ padding: '0 24px 24px' }"
+      :afterClose="onThemeUploadClose"
     >
       <div class="custom-tab-wrapper">
         <a-tabs>
@@ -201,20 +203,15 @@
             tab="本地上传"
             key="2"
           >
-            <upload
+            <FilePondUpload
+              ref="upload"
               name="file"
-              multiple
               accept="application/zip"
+              label="点击选择主题包或将主题包拖拽到此处<br>仅支持 ZIP 格式的文件"
               :uploadHandler="uploadHandler"
-              @change="handleUploadChange"
               @success="handleUploadSuccess"
             >
-              <p class="ant-upload-drag-icon">
+            </FilePondUpload>
-                <a-icon type="inbox" />
-              </p>
-              <p class="ant-upload-text">点击选择主题包或将主题包拖拽到此处</p>
-              <p class="ant-upload-hint">支持单个或批量上传，仅支持 ZIP 格式的文件</p>
-            </upload>
           </a-tab-pane>
         </a-tabs>
       </div>
@@ -223,21 +220,20 @@
       title="更新主题"
       v-model="uploadNewThemeVisible"
       :footer="null"
+      destroyOnClose
+      :afterClose="onThemeUploadClose"
     >
-      <UpdateTheme
+      <FilePondUpload
+        ref="updateByupload"
         name="file"
-        :themeId="prepareUpdateTheme.id"
         accept="application/zip"
+        label="点击选择主题更新包或将主题更新包拖拽到此处<br>仅支持 ZIP 格式的文件"
         :uploadHandler="updateByUploadHandler"
-        @change="handleNewThemeUploadChange"
+        :filed="prepareUpdateTheme.id"
+        :multiple="false"
         @success="handleUploadSuccess"
       >
-        <p class="ant-upload-drag-icon">
+      </FilePondUpload>
-          <a-icon type="inbox" />
-        </p>
-        <p class="ant-upload-text">点击选择主题包或将主题包拖拽到此处</p>
-        <p class="ant-upload-hint">请选择最新的主题包，仅支持 ZIP 格式的文件</p>
-      </UpdateTheme>
     </a-modal>
   </div>
 </template>
@@ -313,26 +309,6 @@ export default {
         this.loadThemes()
       })
     },
-    onThemeSettingsClose() {
-      this.themeSettingVisible = false
-      this.selectedTheme = {}
-    },
-    handleUploadChange(info) {
-      const status = info.file.status
-      if (status === 'done') {
-        this.$message.success(`${info.file.name} 主题上传成功！`)
-      } else if (status === 'error') {
-        this.$message.error(`${info.file.name} 主题上传失败！`)
-      }
-    },
-    handleNewThemeUploadChange(info) {
-      const status = info.file.status
-      if (status === 'done') {
-        this.$message.success(`${info.file.name} 主题更新成功！`)
-      } else if (status === 'error') {
-        this.$message.error(`${info.file.name} 主题更新失败！`)
-      }
-    },
     handleUploadSuccess() {
       if (this.uploadThemeVisible) {
         this.uploadThemeVisible = false
@@ -375,13 +351,25 @@ export default {
       })
     },
     handleShowUpdateNewThemeModal(item) {
-      console.log(item)
       this.prepareUpdateTheme = item
       this.uploadNewThemeVisible = true
     },
     handleShowThemeSetting(theme) {
       this.selectedTheme = theme
       this.themeSettingVisible = true
+    },
+    onThemeUploadClose() {
+      if (this.uploadThemeVisible) {
+        this.$refs.upload.handleClearFileList()
+      }
+      if (this.uploadNewThemeVisible) {
+        this.$refs.updateByupload.handleClearFileList()
+      }
+      this.loadThemes()
+    },
+    onThemeSettingsClose() {
+      this.themeSettingVisible = false
+      this.selectedTheme = {}
     }
   }
 }

src/views/post/PostEdit.vue

@@ -187,14 +187,18 @@ export default {
         // Update the post
         postApi.update(this.postToStage.id, this.postToStage, false).then(response => {
           this.$log.debug('Updated post', response.data.data)
-          window.open(`${this.options.blog_url}/api/admin/posts/preview/${this.postToStage.id}`, '_blank')
+          postApi.preview(this.postToStage.id).then(response => {
+            window.open(response.data, '_blank')
+          })
         })
       } else {
         // Create the post
         postApi.create(this.postToStage, false).then(response => {
           this.$log.debug('Created post', response.data.data)
           this.postToStage = response.data.data
-          window.open(`${this.options.blog_url}/api/admin/posts/preview/${this.postToStage.id}`, '_blank')
+          postApi.preview(this.postToStage.id).then(response => {
+            window.open(response.data, '_blank')
+          })
         })
       }
     },

src/views/post/PostList.vue

@@ -143,10 +143,10 @@
               twoToneColor="red"
             />
             <a
+              v-if="record.status=='PUBLISHED'"
               :href="options.blog_url+'/archives/'+record.url"
               target="_blank"
               style="text-decoration: none;"
-              v-if="record.status=='PUBLISHED'"
             >
               <a-tooltip
                 placement="top"
@@ -154,10 +154,10 @@
               >{{ text }}</a-tooltip>
             </a>
             <a
+              v-else-if="record.status == 'INTIMATE'"
               :href="options.blog_url+'/archives/'+record.url+'/password'"
               target="_blank"
               style="text-decoration: none;"
-              v-else-if="record.status == 'INTIMATE'"
             >
               <a-tooltip
                 placement="top"
@@ -165,10 +165,10 @@
               >{{ text }}</a-tooltip>
             </a>
             <a
-              :href="`${options.blog_url}/api/admin/posts/preview/${record.id}`"
-              target="_blank"
-              style="text-decoration: none;"
               v-else-if="record.status=='DRAFT'"
+              href="javascript:void(0)"
+              style="text-decoration: none;"
+              @click="handlePreview(record.id)"
             >
               <a-tooltip
                 placement="topLeft"
@@ -176,10 +176,10 @@
               >{{ text }}</a-tooltip>
             </a>
             <a
+              v-else
               href="javascript:void(0);"
               style="text-decoration: none;"
               disabled
-              v-else
             >
               {{ text }}
             </a>
@@ -564,6 +564,11 @@ export default {
         this.postSettingVisible = true
       })
     },
+    handlePreview(postId) {
+      postApi.preview(postId).then(response => {
+        window.open(response.data, '_blank')
+      })
+    },
     // 关闭文章设置抽屉
     onPostSettingsClose() {
       this.postSettingVisible = false

src/views/sheet/SheetEdit.vue

@@ -174,13 +174,17 @@ export default {
       if (this.sheetToStage.id) {
         sheetApi.update(this.sheetToStage.id, this.sheetToStage, false).then(response => {
           this.$log.debug('Updated sheet', response.data.data)
-          window.open(`${this.options.blog_url}/api/admin/sheets/preview/${this.sheetToStage.id}`, '_blank')
+          sheetApi.preview(this.sheetToStage.id).then(response => {
+            window.open(response.data, '_blank')
+          })
         })
       } else {
         sheetApi.create(this.sheetToStage, false).then(response => {
           this.$log.debug('Created sheet', response.data.data)
           this.sheetToStage = response.data.data
-          window.open(`${this.options.blog_url}/api/admin/sheets/preview/${this.sheetToStage.id}`, '_blank')
+          sheetApi.preview(this.sheetToStage.id).then(response => {
+            window.open(response.data, '_blank')
+          })
         })
       }
     },

src/views/sheet/SheetList.vue

@@ -83,10 +83,10 @@
                   style="max-width: 150px;display: block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                 >
                   <a
+                    v-if="record.status=='PUBLISHED'"
                     :href="options.blog_url+'/s/'+record.url"
                     target="_blank"
                     style="text-decoration: none;"
-                    v-if="record.status=='PUBLISHED'"
                   >
                     <a-tooltip
                       placement="top"
@@ -94,10 +94,10 @@
                     >{{ text }}</a-tooltip>
                   </a>
                   <a
-                    :href="`${options.blog_url}/api/admin/sheets/preview/${record.id}`"
-                    target="_blank"
-                    style="text-decoration: none;"
                     v-else-if="record.status=='DRAFT'"
+                    href="javascript:void(0)"
+                    style="text-decoration: none;"
+                    @click="handlePreview(record.id)"
                   >
                     <a-tooltip
                       placement="topLeft"
@@ -105,10 +105,10 @@
                     >{{ text }}</a-tooltip>
                   </a>
                   <a
+                    v-else
                     href="javascript:void(0);"
                     style="text-decoration: none;"
                     disabled
-                    v-else
                   >
                     {{ text }}
                   </a>
@@ -390,6 +390,11 @@ export default {
         this.sheetSettingVisible = true
       })
     },
+    handlePreview(sheetId) {
+      sheetApi.preview(sheetId).then(response => {
+        window.open(response.data, '_blank')
+      })
+    },
     onSheetSettingsClose() {
       this.sheetSettingVisible = false
       this.selectedSheet = {}

src/views/system/OptionForm.vue

@@ -251,6 +251,30 @@
                 <a-icon type="picture" />附件设置
               </span>
               <a-form layout="vertical">
+                <a-form-item
+                  label="上传图片时预览："
+                  :wrapper-col="wrapperCol"
+                >
+                  <a-switch v-model="options.attachment_upload_image_preview_enable" />
+                </a-form-item>
+                <a-form-item
+                  label="最大上传文件数："
+                  :wrapper-col="wrapperCol"
+                >
+                  <a-input
+                    type="number"
+                    v-model="options.attachment_upload_max_files"
+                  />
+                </a-form-item>
+                <a-form-item
+                  label="同时上传文件数："
+                  :wrapper-col="wrapperCol"
+                >
+                  <a-input
+                    type="number"
+                    v-model="options.attachment_upload_max_parallel_uploads"
+                  />
+                </a-form-item>
                 <a-form-item
                   label="存储位置："
                   :wrapper-col="wrapperCol"

src/views/system/ToolList.vue

@@ -27,20 +27,16 @@
         title="Markdown 文章导入"
         v-model="markdownUpload"
         :footer="null"
+        destroyOnClose
+        :afterClose="onUploadClose"
       >
-        <upload
+        <FilePondUpload
-          name="files"
+          ref="upload"
-          multiple
+          name="file"
           accept="text/markdown"
+          label="拖拽或点击选择 Markdown 文件到此处"
           :uploadHandler="uploadHandler"
-          @change="handleChange"
+        ></FilePondUpload>
-        >
-          <p class="ant-upload-drag-icon">
-            <a-icon type="inbox" />
-          </p>
-          <p class="ant-upload-text">拖拽或点击选择 Markdown 文件到此处</p>
-          <p class="ant-upload-hint">支持多个文件同时上传</p>
-        </upload>
       </a-modal>
     </div>
   </div>
@@ -69,6 +65,9 @@ export default {
       } else if (status === 'error') {
         this.$message.error(`${info.file.name} 导入失败！`)
       }
+    },
+    onUploadClose() {
+      this.$refs.upload.handleClearFileList()
     }
   }
 }