From 00fc92833dbb43d926d5fd5849443de147fdabf9 Mon Sep 17 00:00:00 2001
From: yanglbme <szuyanglb@outlook.com>
Date: Sat, 5 Dec 2020 21:16:09 +0800
Subject: [PATCH] fix: resolve upload error

---
 src/api/file.js                               |  6 ++--
 src/assets/scripts/util.js                    | 35 ++++++++++++++----
 .../CodemirrorEditor/uploadImgDialog.vue      | 36 +++++++++++--------
 src/main.js                                   |  2 --
 src/view/CodemirrorEditor.vue                 | 32 +++++------------
 5 files changed, 61 insertions(+), 50 deletions(-)

diff --git a/src/api/file.js b/src/api/file.js
index 54ff50b..25cfc91 100644
--- a/src/api/file.js
+++ b/src/api/file.js
@@ -237,9 +237,9 @@ function fileUpload(content, file) {
         case "github":
             return ghFileUpload(content, file.name);
         default:
-            return file.size / 1024 < 1024
-                ? giteeUpload(content, file.name)
-                : ghFileUpload(content, file.name);
+            // return file.size / 1024 < 1024
+            //     ? giteeUpload(content, file.name)
+            //     : ghFileUpload(content, file.name);
             return ghFileUpload(content, file.name);
     }
 }
diff --git a/src/assets/scripts/util.js b/src/assets/scripts/util.js
index f9f43a4..d1d974f 100644
--- a/src/assets/scripts/util.js
+++ b/src/assets/scripts/util.js
@@ -264,9 +264,32 @@ export function createTable({ data, rows, cols }) {
     return table;
 }
 
-export const toBase64 = file => new Promise((resolve, reject) => {
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result.split(",").pop());
-    reader.onerror = error => reject(error);
-});
\ No newline at end of file
+export const toBase64 = (file) =>
+    new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file);
+        reader.onload = () => resolve(reader.result.split(",").pop());
+        reader.onerror = (error) => reject(error);
+    });
+
+export function checkImage(file) {
+    // check filename suffix
+    const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name);
+    if (!isValidSuffix) {
+        return {
+            ok: false,
+            msg: "请上传 JPG/PNG/GIF 格式的图片",
+        };
+    }
+
+    // check file size
+    const maxSize = 5;
+    const isLt5M = file.size / 1024 / 1024 <= maxSize;
+    if (!isLt5M) {
+        return {
+            ok: false,
+            msg: `由于公众号限制，图片大小不能超过 ${maxSize}M`,
+        };
+    }
+    return { ok: true };
+}
diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue
index 707bb03..4edef1d 100644
--- a/src/components/CodemirrorEditor/uploadImgDialog.vue
+++ b/src/components/CodemirrorEditor/uploadImgDialog.vue
@@ -304,6 +304,7 @@
 </template>
 
 <script>
+import { checkImage } from "../../assets/scripts/util";
 
 export default {
     props: {
@@ -311,14 +312,9 @@ export default {
             type: Boolean,
             default: false,
         },
-        a: {
-            type: Boolean,
-            default: false,
-        }
     },
     data() {
         return {
-            checkResult: false,
             formGitHub: {
                 repo: "",
                 branch: "",
@@ -381,11 +377,6 @@ export default {
             imgHost: "default",
         };
     },
-    watch: {
-        a: function(newVal, oldVal) {
-            this.checkResult = newVal;
-        }
-    },
     created() {
         if (localStorage.getItem("githubConfig")) {
             this.formGitHub = JSON.parse(localStorage.getItem("githubConfig"));
@@ -413,7 +404,7 @@ export default {
                 const blankElement = this.formGitHub.repo
                     ? "token"
                     : "GitHub 仓库";
-                this.$message.error( `参数「​${blankElement}」不能为空`);
+                this.$message.error(`参数「​${blankElement}」不能为空`);
                 return;
             }
             localStorage.setItem(
@@ -486,12 +477,27 @@ export default {
         },
 
         beforeImageUpload(file) {
-            this.$emit("beforeUpload", file);
-            console.log(this.checkResult);
-            return this.checkResult;
+            // check image
+            const checkResult = checkImage(file);
+            if (!checkResult.ok) {
+                this.$message.error(checkResult.msg);
+                return false;
+            }
+            // check image host
+            let imgHost = localStorage.getItem("imgHost");
+            imgHost = imgHost ? imgHost : "default";
+            localStorage.setItem("imgHost", imgHost);
+
+            const config = localStorage.getItem(`${imgHost}Config`);
+            const isValidHost = imgHost == "default" || config;
+            if (!isValidHost) {
+                this.$message.error(`请先配置 ${imgHost} 图床参数`);
+                return false;
+            }
+            return true;
         },
         uploadImage(params) {
-            return this.$emit("uploadImage", params.file);
+            this.$emit("uploadImage", params.file);
         },
     },
 };
diff --git a/src/main.js b/src/main.js
index 8a88b62..5852b99 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,7 +2,6 @@ import Vue from "vue";
 import App from "./App.vue";
 import store from "./store";
 import ElementUI from "element-ui";
-import { Message} from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import "./plugins/element";
 import "codemirror/lib/codemirror.css";
@@ -17,7 +16,6 @@ import "codemirror/addon/hint/css-hint.js";
 import "./assets/less/theme.less";
 
 Vue.use(ElementUI);
-Vue.use(Message);
 
 Vue.config.productionTip = false;
 
diff --git a/src/view/CodemirrorEditor.vue b/src/view/CodemirrorEditor.vue
index f2b5f61..da2118e 100644
--- a/src/view/CodemirrorEditor.vue
+++ b/src/view/CodemirrorEditor.vue
@@ -76,7 +76,6 @@
             @beforeUpload="beforeUpload"
             @uploadImage="uploadImage"
             @uploaded="uploaded"
-            :a = "a"
         />
         <about-dialog v-model="aboutDialogVisible" />
         <insert-form-dialog v-model="dialogFormVisible" />
@@ -103,6 +102,7 @@ import {
     setFontSize,
     saveEditorContent,
     customCssWithTemplate,
+    checkImage,
 } from "../assets/scripts/util";
 
 import { toBase64 } from "../assets/scripts/util";
@@ -125,7 +125,6 @@ export default {
             source: "",
             mouseLeft: 0,
             mouseTop: 0,
-            a: false,
         };
     },
     components: {
@@ -227,25 +226,11 @@ export default {
             this.onEditorRefresh();
         },
         beforeUpload(file) {
-            // check filename suffix
-            const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(
-                file.name
-            );
-            if (!isValidSuffix) {
-                this.$message.error("请上传 JPG/PNG/GIF 格式的图片");
-                this.a = false;
-                return;
-            }
-
-            // check file size
-            const maxSize = 5;
-            const isLt5M = file.size / 1024 / 1024 <= maxSize;
-            if (!isLt5M) {
-                this.$message.error(
-                    `由于公众号限制，图片大小不能超过 ${maxSize}M`
-                );
-                this.a = false;
-                return;
+            // validate image
+            const checkResult = checkImage(file);
+            if (!checkResult.ok) {
+                 this.$message.error(checkResult.msg);
+                return false;
             }
 
             // check image host
@@ -257,10 +242,9 @@ export default {
             const isValidHost = imgHost == "default" || config;
             if (!isValidHost) {
                 this.$message.error(`请先配置 ${imgHost} 图床参数`);
-                this.a = false;
-                return;
+                return false;
             }
-            this.a = true;
+            return true;
         },
         uploadImage(file) {
             this.isImgLoading = true;