From 80e6007b115942a1b7e18336010395ed72099726 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Sat, 2 Jan 2021 14:58:48 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=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=EF=BC=8C=E6=B7=BB?=
 =?UTF-8?q?=E5=8A=A0=E4=B8=8A=E4=BC=A0=E8=BF=9B=E5=BA=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/input/UploadImageInput.vue | 86 +++++++++++++++++------
 src/views/markdown/index.vue              | 10 ++-
 2 files changed, 73 insertions(+), 23 deletions(-)

diff --git a/src/components/input/UploadImageInput.vue b/src/components/input/UploadImageInput.vue
index 907d56e..de6d01f 100644
--- a/src/components/input/UploadImageInput.vue
+++ b/src/components/input/UploadImageInput.vue
@@ -15,28 +15,41 @@
         :show-file-list="false"
         :file-list="fileList"
         :limit="1"
-        :auto-upload="false"
         :before-upload="handleBeforeUpload"
         :on-success="handleSuccess"
         :on-remove="handleFileListRemove"
-        :on-change="handleChange"
+        :on-progress="handleProgress"
       >
-<!--        <el-button size="small" type="text">点击上传</el-button>-->
         <el-button title="上传" type="primary" size="mini" icon="el-icon-upload2" circle></el-button>
-        <div class="url-desc" v-if="uploadState > 0" slot="tip">{{ uploadState === 1 ? ' 图片上传中' : ' 图片上传成功' }} <i :class="{'el-icon-loading': uploadState === 1, 'el-icon-check': uploadState === 2}"></i></div>
+        <div class="url-desc" v-if="uploadState > 0" slot="tip">
+          <span v-show="uploadState === 1">图片上传中{{uploadPercentage}}%</span>
+          <span v-show="uploadState === 2">图片上传成功</span>
+          <span v-show="uploadState === 3">该图片不支持自动上传，请下载后手动上传</span>
+          <span v-show="uploadState === 4">图片加载中</span>
+          <i :class="{
+            'el-icon-loading': uploadState === 1 ||  uploadState === 4,
+            'el-icon-check': uploadState === 2,
+            'el-icon-warning-outline': uploadState === 3
+          }"></i>
+        </div>
       </el-upload>
     </div>
     <el-tooltip class="item" effect="dark" placement="bottom">
       <el-input :autosize="{ minRows: 1, maxRows: 6}" 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>
+        <el-image :style="{maxWidth: tipImageMaxWidth + 'px'}" :src="currentValue" fit="contain" @load="loadSuccess">
+          <div slot="error" class="image-slot">
+            <i class="el-icon-picture-outline"></i>
+          </div>
+        </el-image>
       </div>
     </el-tooltip>
   </div>
 </template>
 <script>
+
+import axios from 'axios'
 import fileConfig from "@/utils/file-config";
-import markdownApi from "@/api/markdown-api.js";
 import SelectFile from "@/components/ShowFile/SelectFile";
 
 export default {
@@ -46,6 +59,10 @@ export default {
     value: {
       type: String,
       default: ''
+    },
+    tipImageMaxWidth: {
+      type: Number,
+      default: 250
     }
   },
   data() {
@@ -66,6 +83,7 @@ export default {
       uploadState: 0, // 文件上传状态, 0 没有文件上传, 1 正在上传, 2 上传成功
       uploadTip: '',
       dialogSelectFile: false,
+      uploadPercentage: 0
     }
   },
   watch: {
@@ -86,25 +104,35 @@ export default {
       this.currentValue = window.location.origin + fileConfig.previewUrl(this.$store.state.user.name, row)
       this.change(this.currentValue)
     },
-    handleChange(file, fileList) {
-      console.log('handleChange', file, fileList)
-    },
-    handleBeforeUpload(file){
+    handleBeforeUpload(){
       this.uploadState = 1
     },
-    handleSuccess(response, file, fileList) {
+    handleProgress(event, file){
+      this.onpregress(file.percentage | 0)
+    },
+    onpregress(percentage){
+      this.uploadPercentage = percentage
+    },
+    handleSuccess(response) {
       if(response.code === 0){
         if(response.data && response.data.length > 0){
           this.format(response.data[0].filepath, response.data[0].filename)
         }
       }
+      this.uploadSuccessAfter()
+    },
+    uploadSuccessAfter(){
       this.uploadState = 2
       this.fileList = []
+      const that = this
+      setTimeout(function (){
+        that.uploadState = 0
+      }, 3000)
     },
     handleFileListRemove(file, fileList) {
       this.fileList = fileList
     },
-    format(filepath, filename){
+    format(filepath){
       this.currentValue = window.location.origin + fileConfig.mardownPreviewUrl(filepath)
       this.change(this.currentValue)
     },
@@ -115,12 +143,16 @@ export default {
       xhr.open("get", the_url, true);
       xhr.responseType = "blob";
       xhr.onload = function() {
-        if (this.status == 200) {
+        if (this.status === 200) {
           if(callback){
             callback(this.response)
           }
         }
       };
+      xhr.onerror = function (){
+        that.uploadState = 3
+        console.log(this.status, this.response)
+      }
       xhr.send();
     },
     loadSuccess() {
@@ -129,8 +161,9 @@ export default {
           const that = this
           this.timer = setTimeout(function (){
             if(!that.currentValue.startsWith(window.location.origin)){
-              that.uploadState = 1
+              that.uploadState = 4
               that.urlToBlob(that.currentValue, response => {
+                that.uploadState = 1
                 const file = new window.File(
                   [response],
                   that.getFileNameByUrl(that.currentValue),
@@ -140,11 +173,7 @@ export default {
                 data.append("files", file)
                 data.append("username", that.$store.state.user.name)
                 data.append("userId", that.$store.state.user.userId)
-                markdownApi.uploadImage(data).then((res) => {
-                  that.format(res.data[0].filepath, res.data[0].filename)
-                  that.uploadState = 2
-                  that.$refs.uploadRef.clearFiles()
-                })
+                that.uploadImage(that, data)
               })
             }
           }, 300)
@@ -154,6 +183,22 @@ export default {
         this.timer = null
       }
     },
+    uploadImage(that, data){
+      axios.post('/api/upload-markdown-image', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+          'jmal-token': that.$store.state.user.token
+        },
+        onUploadProgress: progressEvent => {
+          that.onpregress((progressEvent.loaded / progressEvent.total * 100 | 0))
+        }
+      }).then((res) => {
+          const data = res.data.data[0]
+          that.format(data.filepath, data.filename)
+          that.uploadSuccessAfter()
+          that.$refs.uploadRef.clearFiles()
+        })
+    },
     // 获取url中的文件名
     getFileNameByUrl(url){
       const urlRgx = /[a-zA-z]+:\/\/[^\s]*/
@@ -161,7 +206,6 @@ export default {
         if(url.indexOf("-1") > -1){
           url = url.split('?')[0]
         }
-        console.log(url)
         let arr = url.split('/')
         return arr[arr.length - 1]
       }
@@ -198,7 +242,7 @@ export default {
   }
   .el-upload-list__item {
     margin-top: 0;
-    padding: 0px 0px 0px 80px;
+    padding: 0 0 0 80px;
   }
   .el-upload-list__item.is-success .el-upload-list__item-name {
     line-height: 90px;
diff --git a/src/views/markdown/index.vue b/src/views/markdown/index.vue
index b04aaaf..0bd7d66 100644
--- a/src/views/markdown/index.vue
+++ b/src/views/markdown/index.vue
@@ -82,6 +82,8 @@
             <div v-if="inputValueExist" class="instruction-error">该标签已存在</div>
             <el-button v-if="!inputVisible" class="button-new-tag" size="small" @click="showInput"> + 新增标签 </el-button>
           </div>
+          <p class="mark-setting-label">文章封面：</p>
+          <upload-image-input v-model="file.cover"/>
           <p class="mark-setting-label">
             其他：
           </p>
@@ -549,10 +551,14 @@
       font-weight: 500;
     }
   }
-
+/deep/ .el-drawer__body {
+  .more-setting {
+    padding: 15px;
+  }
+}
   /deep/ .more-setting {
     margin-top: 32px;
-    padding: 15px;
+    padding-top: 15px;
     .el-input {
       width: 100%;
     }