From 9b4e972b160d83f8614b583d12999e2b5fdf6316 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 26 Dec 2020 23:33:05 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E8=BE=93=E5=85=A5=E6=A1=86=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/UploadImageInput.vue  | 40 ++++++++++++++--------
 src/views/setting/articles/blogManager.vue |  8 +----
 2 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/src/components/input/UploadImageInput.vue b/src/components/input/UploadImageInput.vue
index 6880e7a..d4417b3 100644
--- a/src/components/input/UploadImageInput.vue
+++ b/src/components/input/UploadImageInput.vue
@@ -1,21 +1,23 @@
 <template>
   <div>
     <el-upload
+      ref="uploadRef"
       action="/api/upload-markdown-image"
       :headers="headers"
       :data="extraData"
       name="files"
       accept="image/*"
-      :show-file-list="true"
+      :show-file-list="false"
       :file-list="fileList"
-      list-type="picture"
       :limit="1"
+      :before-upload="handleBeforeUpload"
       :on-success="handleSuccess"
+      :on-remove="handleFileListRemove"
     >
-      <el-button size="small" type="text">点击上传</el-button>或者输入图片的url
-      <div slot="tip">{{ uploadTip }}</div>
+      <el-button size="small" type="text">点击上传</el-button><span>或者输入图片的url</span>
+      <div v-if="uploadState > 0" slot="tip">{{ uploadState === 1 ? '图片上传中' : '图片上传成功' }} <i :class="{'el-icon-loading': uploadState === 1, 'el-icon-check': uploadState === 2}"></i></div>
     </el-upload>
-    <el-tooltip v-if="fileList.length === 0" class="item" effect="dark" placement="bottom">
+    <el-tooltip class="item" effect="dark" placement="bottom">
       <el-input :autosize="{ minRows: 1, maxRows: 4}" type="textarea" width="100%" v-model="currentValue" @change="change" @input="input" @focus="isLocked = true"></el-input>
       <div slot="content">
         <el-image style="width: 150px;" :src="currentValue" fit="contain" @load="loadSuccess"></el-image>
@@ -50,6 +52,7 @@ export default {
       fileList: [],
       isLocked: false, // true表示输入框正在输入状态
       timer: null,
+      uploadState: 0, // 文件上传状态, 0 没有文件上传, 1 正在上传, 2 上传成功
       uploadTip: ''
     }
   },
@@ -63,21 +66,28 @@ export default {
   methods: {
     change(value) {
       this.isLocked = false
-      console.log('change')
       this.$emit('input', value)
     },
     input(value) {
-      console.log('input')
+    },
+    handleBeforeUpload(file){
+      this.uploadState = 1
     },
     handleSuccess(response, file, fileList) {
       if(response.code === 0){
         if(response.data && response.data.length > 0){
-          this.currentValue = window.location.origin + fileConfig.mardownPreviewUrl(response.data[0].filepath) + "?o=thumbnail"
-          this.change(this.currentValue)
-          fileList[0].name = response.data[0].filename;
-          fileList[0].url = this.currentValue;
+          this.format(response.data[0].filepath, response.data[0].filename)
         }
       }
+      this.uploadState = 2
+      this.fileList = []
+    },
+    handleFileListRemove(file, fileList) {
+      this.fileList = fileList
+    },
+    format(filepath, filename){
+      this.currentValue = window.location.origin + fileConfig.mardownPreviewUrl(filepath)
+      this.change(this.currentValue)
     },
     loadSuccess() {
       if(this.timer == null){
@@ -85,16 +95,18 @@ export default {
           const that = this
           this.timer = setTimeout(function (){
             if(!that.currentValue.startsWith(window.location.origin)){
-              that.uploadTip = "图片加载成功，准备上传"
+              that.uploadState = 1
               markdownApi.uploadLinkImage({
                 username: that.$store.state.user.name,
                 userId: that.$store.state.user.userId,
                 url: that.currentValue
               }).then((res) => {
-
+                that.format(res.data.filepath, res.data.filename)
+                that.uploadState = 2
+                that.$refs.uploadRef.clearFiles()
               })
             }
-          }, 500)
+          }, 300)
         }
       } else {
         clearTimeout(this.timer)
diff --git a/src/views/setting/articles/blogManager.vue b/src/views/setting/articles/blogManager.vue
index 38d4014..f351dee 100644
--- a/src/views/setting/articles/blogManager.vue
+++ b/src/views/setting/articles/blogManager.vue
@@ -108,7 +108,7 @@ export default {
   },
   data() {
     return {
-      activeNames: [],
+      activeNames: ['1'],
       example: '<i class="fab fa-github">github</i>',
       form: {
         backgroundSite: '',
@@ -129,12 +129,6 @@ export default {
   computed: {},
   mounted() {
     this.getSetting()
-    this.$nextTick(() => {
-      const that = this
-      setTimeout(function (){
-        that.activeNames = ['1']
-      },50)
-    })
   },
   methods: {
     preview(){