From 0fb8f3035c16700002e8febb203f8402e55ffbd1 Mon Sep 17 00:00:00 2001
From: jmal <zhushilun084@gmail.com>
Date: Thu, 31 Dec 2020 17:11:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=EF=BC=9A=E9=80=9A=E8=BF=87UR?=
 =?UTF-8?q?L=E4=B8=8A=E4=BC=A0=E7=9A=84=E5=9B=BE=E7=89=87=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BA=E4=BB=8E=E6=9C=AC=E5=9C=B0=E4=B8=8B=E8=BD=BD=E5=86=8D?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/file-api.js                       |  8 ----
 src/api/markdown-api.js                   |  8 ++++
 src/components/input/UploadImageInput.vue | 57 +++++++++++++++++++----
 3 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/src/api/file-api.js b/src/api/file-api.js
index 20d8b2a..43a92a5 100644
--- a/src/api/file-api.js
+++ b/src/api/file-api.js
@@ -145,14 +145,6 @@ export default {
       }
     })
   },
-  // 上传文档里的图片
-  uploadImage: function(data) {
-    return request({
-      url: 'upload-markdown-image',
-      method: 'post',
-      data: data
-    })
-  },
   // 生成分享链接
   generate: function(data) {
     return request({
diff --git a/src/api/markdown-api.js b/src/api/markdown-api.js
index 5530c28..b413a56 100644
--- a/src/api/markdown-api.js
+++ b/src/api/markdown-api.js
@@ -50,4 +50,12 @@ export default {
       data: params
     })
   },
+  // 上传blob格式的图片
+  uploadImage: function(data) {
+    return request({
+      url: '/upload-markdown-image',
+      method: 'post',
+      data: data
+    })
+  },
 }
diff --git a/src/components/input/UploadImageInput.vue b/src/components/input/UploadImageInput.vue
index a18a19e..907d56e 100644
--- a/src/components/input/UploadImageInput.vue
+++ b/src/components/input/UploadImageInput.vue
@@ -5,8 +5,8 @@
       <div class="url-desc url-desc-first">输入图片的url 或</div>
       <el-button class="upload-select-btn" title="选择文件" type="primary" size="mini" icon="el-icon-folder" circle @click="dialogSelectFile = true"></el-button>
       <el-upload
-        class="upload"
         ref="uploadRef"
+        class="upload"
         action="/api/upload-markdown-image"
         :headers="headers"
         :data="extraData"
@@ -15,9 +15,11 @@
         :show-file-list="false"
         :file-list="fileList"
         :limit="1"
+        :auto-upload="false"
         :before-upload="handleBeforeUpload"
         :on-success="handleSuccess"
         :on-remove="handleFileListRemove"
+        :on-change="handleChange"
       >
 <!--        <el-button size="small" type="text">点击上传</el-button>-->
         <el-button title="上传" type="primary" size="mini" icon="el-icon-upload2" circle></el-button>
@@ -84,6 +86,9 @@ 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){
       this.uploadState = 1
     },
@@ -103,6 +108,21 @@ export default {
       this.currentValue = window.location.origin + fileConfig.mardownPreviewUrl(filepath)
       this.change(this.currentValue)
     },
+    // url转blob
+    urlToBlob(the_url, callback) {
+      const that = this
+      let xhr = new XMLHttpRequest();
+      xhr.open("get", the_url, true);
+      xhr.responseType = "blob";
+      xhr.onload = function() {
+        if (this.status == 200) {
+          if(callback){
+            callback(this.response)
+          }
+        }
+      };
+      xhr.send();
+    },
     loadSuccess() {
       if(this.timer == null){
         if(this.isLocked){
@@ -110,14 +130,21 @@ export default {
           this.timer = setTimeout(function (){
             if(!that.currentValue.startsWith(window.location.origin)){
               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()
+              that.urlToBlob(that.currentValue, response => {
+                const file = new window.File(
+                  [response],
+                  that.getFileNameByUrl(that.currentValue),
+                  { type: response.type }
+                );
+                let data = new FormData()
+                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()
+                })
               })
             }
           }, 300)
@@ -126,6 +153,18 @@ export default {
         clearTimeout(this.timer)
         this.timer = null
       }
+    },
+    // 获取url中的文件名
+    getFileNameByUrl(url){
+      const urlRgx = /[a-zA-z]+:\/\/[^\s]*/
+      if(urlRgx.test(url)){
+        if(url.indexOf("-1") > -1){
+          url = url.split('?')[0]
+        }
+        console.log(url)
+        let arr = url.split('/')
+        return arr[arr.length - 1]
+      }
     }
   }
 }