From adc097b2f2c70b531a08f1886a1a6cd062bcdcbf Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Fri, 25 Dec 2020 18:10:59 +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=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/markdown-api.js                    |   8 ++
 src/components/input/UploadImageInput.vue  | 103 +++++++++++++++++++--
 src/views/setting/articles/blogManager.vue |   4 +-
 3 files changed, 102 insertions(+), 13 deletions(-)

diff --git a/src/api/markdown-api.js b/src/api/markdown-api.js
index 5b09527..5530c28 100644
--- a/src/api/markdown-api.js
+++ b/src/api/markdown-api.js
@@ -42,4 +42,12 @@ export default {
       data
     })
   },
+  // 上传url形式图片
+  uploadLinkImage: function(params) {
+    return request({
+      url: '/upload-markdown-link-image',
+      method: 'post',
+      data: params
+    })
+  },
 }
diff --git a/src/components/input/UploadImageInput.vue b/src/components/input/UploadImageInput.vue
index 8f028a4..6880e7a 100644
--- a/src/components/input/UploadImageInput.vue
+++ b/src/components/input/UploadImageInput.vue
@@ -1,20 +1,32 @@
 <template>
   <div>
     <el-upload
-      action="https://jsonplaceholder.typicode.com/posts/"
-      :show-file-list="false"
-      :limit="1">
-      <el-button size="small" type="text">点击上传</el-button>
+      action="/api/upload-markdown-image"
+      :headers="headers"
+      :data="extraData"
+      name="files"
+      accept="image/*"
+      :show-file-list="true"
+      :file-list="fileList"
+      list-type="picture"
+      :limit="1"
+      :on-success="handleSuccess"
+    >
+      <el-button size="small" type="text">点击上传</el-button>或者输入图片的url
+      <div slot="tip">{{ uploadTip }}</div>
     </el-upload>
-    <el-tooltip class="item" effect="dark" placement="bottom">
-      <el-input :autosize="{ minRows: 2, maxRows: 4}" type="textarea" width="100%" v-model="currentValue" @change="change"></el-input>
+    <el-tooltip v-if="fileList.length === 0" 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"></el-image>
+        <el-image style="width: 150px;" :src="currentValue" fit="contain" @load="loadSuccess"></el-image>
       </div>
     </el-tooltip>
   </div>
 </template>
 <script>
+import fileConfig from "@/utils/file-config";
+import markdownApi from "@/api/markdown-api.js";
+
 export default {
   name: 'UploadImageInput',
   props: {
@@ -25,18 +37,89 @@ export default {
   },
   data() {
     return {
-      currentValue: this.value
+      headers: {
+        'jmal-token': this.$store.state.user.token,
+        'username': this.$store.state.user.name,
+        'userId': this.$store.state.user.userId
+      },
+      extraData: {
+        'username': this.$store.state.user.name,
+        'userId': this.$store.state.user.userId
+      },
+      currentValue: this.value,
+      fileList: [],
+      isLocked: false, // true表示输入框正在输入状态
+      timer: null,
+      uploadTip: ''
     }
   },
   watch: {
     value(val) {
       this.currentValue = val
+      // const reg = /[^\\\/]*[\\\/]+/g
+      // this.fileList.push({name: val.replace(reg, ''), url: val})
     }
   },
   methods: {
-    change() {
-      this.$emit('input', this.currentValue)
+    change(value) {
+      this.isLocked = false
+      console.log('change')
+      this.$emit('input', value)
+    },
+    input(value) {
+      console.log('input')
+    },
+    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;
+        }
+      }
+    },
+    loadSuccess() {
+      if(this.timer == null){
+        if(this.isLocked){
+          const that = this
+          this.timer = setTimeout(function (){
+            if(!that.currentValue.startsWith(window.location.origin)){
+              that.uploadTip = "图片加载成功，准备上传"
+              markdownApi.uploadLinkImage({
+                username: that.$store.state.user.name,
+                userId: that.$store.state.user.userId,
+                url: that.currentValue
+              }).then((res) => {
+
+              })
+            }
+          }, 500)
+        }
+      } else {
+        clearTimeout(this.timer)
+        this.timer = null
+      }
     }
   }
 }
 </script>
+<style lang="scss" scoped>
+/deep/ .el-upload-list--picture {
+  .el-upload-list__item-thumbnail {
+    width: unset;
+    height: 90px;
+    object-fit: cover;
+  }
+  .el-upload-list__item {
+    margin-top: 0;
+    padding: 0px 0px 0px 80px;
+  }
+  .el-upload-list__item.is-success .el-upload-list__item-name {
+    line-height: 90px;
+  }
+}
+/deep/ .el-upload-list__item-name {
+  margin-right: 10px;
+}
+</style>
diff --git a/src/views/setting/articles/blogManager.vue b/src/views/setting/articles/blogManager.vue
index b206496..38d4014 100644
--- a/src/views/setting/articles/blogManager.vue
+++ b/src/views/setting/articles/blogManager.vue
@@ -13,9 +13,7 @@
         <el-collapse-item title="网站首页背景" name="1">
           <div class="config-itme-label">站点背景大图：
           </div>
-          <upload-image-input
-            v-model="form.backgroundSite"
-          />
+          <upload-image-input v-model="form.backgroundSite"/>
           <span class="instruction">在这里填入图片的URL地址, 以在网站首页显示一个背景大图。</span>
           <div class="config-itme-label">首页大图内文字：</div>
           <el-input autosize type="textarea" v-model="form.backgroundTextSite"></el-input>