From 71704264c5d54fe55409b412f782c9fd6edf8f15 Mon Sep 17 00:00:00 2001
From: yanglbme <szuyanglb@outlook.com>
Date: Fri, 4 Dec 2020 00:57:46 +0800
Subject: [PATCH 1/3] refactor: update upload component

---
 src/api/file.js                               |  6 +--
 src/assets/scripts/uploadImageFile.js         | 18 +------
 src/assets/scripts/util.js                    |  7 +++
 src/components/CodemirrorEditor/header.vue    |  2 +-
 .../CodemirrorEditor/uploadImgDialog.vue      | 51 ++++++++++++-------
 src/main.js                                   |  1 -
 src/store/index.js                            |  1 -
 src/view/CodemirrorEditor.vue                 |  2 +-
 8 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/api/file.js b/src/api/file.js
index 25cfc91..54ff50b 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/uploadImageFile.js b/src/assets/scripts/uploadImageFile.js
index 081b4b1..45883bf 100644
--- a/src/assets/scripts/uploadImageFile.js
+++ b/src/assets/scripts/uploadImageFile.js
@@ -2,12 +2,6 @@ import fileApi from "../../api/file";
 
 export function uploadImgFile(file) {
     return new Promise((resolve, reject) => {
-        const checkImageResult = isImageIllegal(file);
-        if (checkImageResult) {
-            reject(checkImageResult);
-            return;
-        }
-
         const base64Reader = new FileReader();
         base64Reader.readAsDataURL(file);
         base64Reader.onload = function () {
@@ -22,14 +16,4 @@ export function uploadImgFile(file) {
                 });
         };
     });
-}
-
-export function isImageIllegal(file) {
-    if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {
-        return "请上传 JPG/PNG/GIF 格式的图片";
-    }
-    if (file.size > 5 * 1024 * 1024) {
-        return "由于公众号限制，图片大小不能超过 5.0M";
-    }
-    return false;
-}
+}
\ No newline at end of file
diff --git a/src/assets/scripts/util.js b/src/assets/scripts/util.js
index 7d5a5fe..f9f43a4 100644
--- a/src/assets/scripts/util.js
+++ b/src/assets/scripts/util.js
@@ -263,3 +263,10 @@ 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
diff --git a/src/components/CodemirrorEditor/header.vue b/src/components/CodemirrorEditor/header.vue
index 27b62e1..b73844b 100644
--- a/src/components/CodemirrorEditor/header.vue
+++ b/src/components/CodemirrorEditor/header.vue
@@ -48,7 +48,7 @@
             <i
                 class="el-icon-s-grid"
                 size="medium"
-                @click="$emit('showDialogForm')"
+                @click="$emit('show-dialog-form')"
             ></i>
         </el-tooltip>
         <el-form size="mini" class="ctrl" :inline="true">
diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue
index 48bf255..a62fe72 100644
--- a/src/components/CodemirrorEditor/uploadImgDialog.vue
+++ b/src/components/CodemirrorEditor/uploadImgDialog.vue
@@ -29,7 +29,8 @@
                     :multiple="true"
                     accept=".jpg, .jpeg, .png, .gif"
                     name="file"
-                    :before-upload="beforeUpload"
+                    :before-upload="beforeImageUpload"
+                    :http-request="uploadImage"
                     v-loading="uploadingImg"
                 >
                     <i class="el-icon-upload"></i>
@@ -305,6 +306,8 @@
 
 <script>
 import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
+import { toBase64 } from "../../assets/scripts/util";
+import fileApi from "../../api/file";
 
 export default {
     props: {
@@ -516,30 +519,42 @@ export default {
             });
         },
 
-        // 图片上传前的处理
-        beforeUpload(file) {
-            const imgHost = localStorage.getItem("imgHost");
-            const config = localStorage.getItem(`${imgHost}Config`);
-            if (!config && imgHost !== "" && imgHost !== "default") {
-                this.$message.error(`请先配置 ${imgHost} 图床参数`);
-                return false;
-            }
+        beforeImageUpload(file) {
+            let imgHost = localStorage.getItem("imgHost");
+            imgHost = !imgHost ? "default" : imgHost;
 
+            const config = localStorage.getItem(`${imgHost}Config`);
+            const maxSize = 5;
+
+            const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(
+                file.name
+            );
+            const isLt5M = file.size / 1024 / 1024 <= maxSize;
+            const isValidHost = imgHost == "default" || config;
+
+            if (!isValidSuffix) {
+                this.$message.error("请上传 JPG/PNG/GIF 格式的图片");
+            }
+            if (!isLt5M) {
+                this.$message.error(
+                    `由于公众号限制，图片大小不能超过 ${maxSize}M`
+                );
+            }
+            if (!isValidHost) {
+                this.$message.error(`请先配置 ${imgHost} 图床参数`);
+            }
+            return isValidSuffix && isLt5M && isValidHost;
+        },
+        uploadImage(params) {
             this.uploadingImg = true;
-            uploadImgFile(file)
+            uploadImgFile(params.file)
                 .then((res) => {
                     this.$emit("uploaded", res);
-                    this.uploadingImg = false;
                 })
                 .catch((err) => {
-                    this.uploadingImg = false;
-                    this.$message({
-                        showClose: true,
-                        message: err,
-                        type: "error",
-                    });
+                    this.$message.error(err);
                 });
-            return false;
+            this.uploadingImg = false;
         },
     },
 };
diff --git a/src/main.js b/src/main.js
index f307cae..5852b99 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,7 +5,6 @@ import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import "./plugins/element";
 import "codemirror/lib/codemirror.css";
-import "codemirror/theme/ambiance.css";
 import "codemirror/theme/xq-light.css";
 import "codemirror/mode/css/css";
 import "codemirror/mode/markdown/markdown";
diff --git a/src/store/index.js b/src/store/index.js
index 35654e3..5df5ea3 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -152,7 +152,6 @@ const mutations = {
     },
     clearEditorToDefault(state) {
         const doc = formatDoc(DEFAULT_CONTENT);
-
         state.editor.setValue(doc);
         state.cssEditor.setValue(DEFAULT_CSS_CONTENT);
     },
diff --git a/src/view/CodemirrorEditor.vue b/src/view/CodemirrorEditor.vue
index c27775b..5fa1c75 100644
--- a/src/view/CodemirrorEditor.vue
+++ b/src/view/CodemirrorEditor.vue
@@ -9,7 +9,7 @@
                     @download="downloadEditorContent"
                     @showCssEditor="showCssEditor = !showCssEditor"
                     @show-about-dialog="aboutDialogVisible = true"
-                    @showDialogForm="dialogFormVisible = true"
+                    @show-dialog-form="dialogFormVisible = true"
                     @show-dialog-upload-img="dialogUploadImgVisible = true"
                     @startCopy="(isCoping = true), (backLight = true)"
                     @endCopy="endCopy"

From 186026afa198db8c315173b8940fee2d580c6021 Mon Sep 17 00:00:00 2001
From: yanglbme <szuyanglb@outlook.com>
Date: Fri, 4 Dec 2020 20:47:28 +0800
Subject: [PATCH 2/3] refactor: update uploadImg component

---
 src/assets/scripts/uploadImageFile.js         |  19 ---
 .../CodemirrorEditor/rightClickMenu.vue       |   1 -
 .../CodemirrorEditor/uploadImgDialog.vue      | 113 ++++--------------
 src/main.js                                   |   2 +
 src/view/CodemirrorEditor.vue                 | 105 ++++++++++------
 5 files changed, 94 insertions(+), 146 deletions(-)
 delete mode 100644 src/assets/scripts/uploadImageFile.js

diff --git a/src/assets/scripts/uploadImageFile.js b/src/assets/scripts/uploadImageFile.js
deleted file mode 100644
index 45883bf..0000000
--- a/src/assets/scripts/uploadImageFile.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import fileApi from "../../api/file";
-
-export function uploadImgFile(file) {
-    return new Promise((resolve, reject) => {
-        const base64Reader = new FileReader();
-        base64Reader.readAsDataURL(file);
-        base64Reader.onload = function () {
-            const base64Content = this.result.split(",").pop();
-            fileApi
-                .fileUpload(base64Content, file)
-                .then((res) => {
-                    resolve(res);
-                })
-                .catch((err) => {
-                    reject(err);
-                });
-        };
-    });
-}
\ No newline at end of file
diff --git a/src/components/CodemirrorEditor/rightClickMenu.vue b/src/components/CodemirrorEditor/rightClickMenu.vue
index 46c8923..00d9e08 100644
--- a/src/components/CodemirrorEditor/rightClickMenu.vue
+++ b/src/components/CodemirrorEditor/rightClickMenu.vue
@@ -19,7 +19,6 @@
 </template>
 
 <script>
-import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
 export default {
     props: {
         value: {
diff --git a/src/components/CodemirrorEditor/uploadImgDialog.vue b/src/components/CodemirrorEditor/uploadImgDialog.vue
index a62fe72..707bb03 100644
--- a/src/components/CodemirrorEditor/uploadImgDialog.vue
+++ b/src/components/CodemirrorEditor/uploadImgDialog.vue
@@ -31,7 +31,6 @@
                     name="file"
                     :before-upload="beforeImageUpload"
                     :http-request="uploadImage"
-                    v-loading="uploadingImg"
                 >
                     <i class="el-icon-upload"></i>
                     <div class="el-upload__text">
@@ -305,9 +304,6 @@
 </template>
 
 <script>
-import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
-import { toBase64 } from "../../assets/scripts/util";
-import fileApi from "../../api/file";
 
 export default {
     props: {
@@ -315,9 +311,14 @@ export default {
             type: Boolean,
             default: false,
         },
+        a: {
+            type: Boolean,
+            default: false,
+        }
     },
     data() {
         return {
+            checkResult: false,
             formGitHub: {
                 repo: "",
                 branch: "",
@@ -378,9 +379,13 @@ export default {
                 },
             ],
             imgHost: "default",
-            uploadingImg: false,
         };
     },
+    watch: {
+        a: function(newVal, oldVal) {
+            this.checkResult = newVal;
+        }
+    },
     created() {
         if (localStorage.getItem("githubConfig")) {
             this.formGitHub = JSON.parse(localStorage.getItem("githubConfig"));
@@ -401,50 +406,32 @@ export default {
     methods: {
         changeImgHost() {
             localStorage.setItem("imgHost", this.imgHost);
-            this.$message({
-                showClose: true,
-                message: "已成功切换图床",
-                type: "success",
-            });
+            this.$message.success("已成功切换图床");
         },
         saveGitHubConfiguration() {
             if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
                 const blankElement = this.formGitHub.repo
                     ? "token"
                     : "GitHub 仓库";
-                this.$message({
-                    showClose: true,
-                    message: `参数「​${blankElement}」不能为空`,
-                    type: "error",
-                });
+                this.$message.error( `参数「​${blankElement}」不能为空`);
                 return;
             }
             localStorage.setItem(
                 "githubConfig",
                 JSON.stringify(this.formGitHub)
             );
-            this.$message({
-                message: "保存成功",
-                type: "success",
-            });
+            this.$message.success("保存成功");
         },
         saveGiteeConfiguration() {
             if (!(this.formGitee.repo && this.formGitee.accessToken)) {
                 const blankElement = this.formGitee.repo
                     ? "私人令牌"
                     : "Gitee 仓库";
-                this.$message({
-                    showClose: true,
-                    message: `参数「​${blankElement}」不能为空`,
-                    type: "error",
-                });
+                this.$message.error(`参数「​${blankElement}」不能为空`);
                 return;
             }
             localStorage.setItem("giteeConfig", JSON.stringify(this.formGitee));
-            this.$message({
-                message: "保存成功",
-                type: "success",
-            });
+            this.$message.success("保存成功");
         },
         saveAliOSSConfiguration() {
             if (
@@ -455,21 +442,14 @@ export default {
                     this.formAliOSS.region
                 )
             ) {
-                this.$message({
-                    showClose: true,
-                    message: `阿里云 OSS 参数配置不全`,
-                    type: "error",
-                });
+                this.$message.error(`阿里云 OSS 参数配置不全`);
                 return;
             }
             localStorage.setItem(
                 "aliOSSConfig",
                 JSON.stringify(this.formAliOSS)
             );
-            this.$message({
-                message: "保存成功",
-                type: "success",
-            });
+            this.$message.success("保存成功");
         },
 
         saveTxCOSConfiguration() {
@@ -481,18 +461,11 @@ export default {
                     this.formTxCOS.region
                 )
             ) {
-                this.$message({
-                    showClose: true,
-                    message: `腾讯云 COS 参数配置不全`,
-                    type: "error",
-                });
+                this.$message.error(`腾讯云 COS 参数配置不全`);
                 return;
             }
             localStorage.setItem("txCOSConfig", JSON.stringify(this.formTxCOS));
-            this.$message({
-                message: "保存成功",
-                type: "success",
-            });
+            this.$message.success("保存成功");
         },
 
         saveQiniuConfiguration() {
@@ -505,56 +478,20 @@ export default {
                     this.formQiniu.region
                 )
             ) {
-                this.$message({
-                    showClose: true,
-                    message: `七牛云 Kodo 参数配置不全`,
-                    type: "error",
-                });
+                this.$message.error(`七牛云 Kodo 参数配置不全`);
                 return;
             }
             localStorage.setItem("qiniuConfig", JSON.stringify(this.formQiniu));
-            this.$message({
-                message: "保存成功",
-                type: "success",
-            });
+            this.$message.success("保存成功");
         },
 
         beforeImageUpload(file) {
-            let imgHost = localStorage.getItem("imgHost");
-            imgHost = !imgHost ? "default" : imgHost;
-
-            const config = localStorage.getItem(`${imgHost}Config`);
-            const maxSize = 5;
-
-            const isValidSuffix = /\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(
-                file.name
-            );
-            const isLt5M = file.size / 1024 / 1024 <= maxSize;
-            const isValidHost = imgHost == "default" || config;
-
-            if (!isValidSuffix) {
-                this.$message.error("请上传 JPG/PNG/GIF 格式的图片");
-            }
-            if (!isLt5M) {
-                this.$message.error(
-                    `由于公众号限制，图片大小不能超过 ${maxSize}M`
-                );
-            }
-            if (!isValidHost) {
-                this.$message.error(`请先配置 ${imgHost} 图床参数`);
-            }
-            return isValidSuffix && isLt5M && isValidHost;
+            this.$emit("beforeUpload", file);
+            console.log(this.checkResult);
+            return this.checkResult;
         },
         uploadImage(params) {
-            this.uploadingImg = true;
-            uploadImgFile(params.file)
-                .then((res) => {
-                    this.$emit("uploaded", res);
-                })
-                .catch((err) => {
-                    this.$message.error(err);
-                });
-            this.uploadingImg = false;
+            return this.$emit("uploadImage", params.file);
         },
     },
 };
diff --git a/src/main.js b/src/main.js
index 5852b99..8a88b62 100644
--- a/src/main.js
+++ b/src/main.js
@@ -2,6 +2,7 @@ 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";
@@ -16,6 +17,7 @@ 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 5fa1c75..f2b5f61 100644
--- a/src/view/CodemirrorEditor.vue
+++ b/src/view/CodemirrorEditor.vue
@@ -73,7 +73,10 @@
         <upload-img-dialog
             v-model="dialogUploadImgVisible"
             @close="dialogUploadImgVisible = false"
+            @beforeUpload="beforeUpload"
+            @uploadImage="uploadImage"
             @uploaded="uploaded"
+            :a = "a"
         />
         <about-dialog v-model="aboutDialogVisible" />
         <insert-form-dialog v-model="dialogFormVisible" />
@@ -101,7 +104,9 @@ import {
     saveEditorContent,
     customCssWithTemplate,
 } from "../assets/scripts/util";
-import { uploadImgFile } from "../assets/scripts/uploadImageFile";
+
+import { toBase64 } from "../assets/scripts/util";
+import fileApi from "../api/file";
 
 require("codemirror/mode/javascript/javascript");
 import { mapState, mapMutations } from "vuex";
@@ -120,6 +125,7 @@ export default {
             source: "",
             mouseLeft: 0,
             mouseTop: 0,
+            a: false,
         };
     },
     components: {
@@ -174,37 +180,14 @@ export default {
                     ++i
                 ) {
                     let item = e.clipboardData.items[i];
-
                     if (item.kind === "file") {
                         // 校验图床参数
-                        const imgHost =
-                            localStorage.getItem("imgHost") || "default";
-                        if (
-                            imgHost != "default" &&
-                            !localStorage.getItem(`${imgHost}Config`)
-                        ) {
-                            this.$message({
-                                showClose: true,
-                                message: "请先配置好图床参数",
-                                type: "error",
-                            });
+                        const pasteFile = item.getAsFile();
+                        const isValid = this.beforeUpload(pasteFile);
+                        if (!isValid) {
                             continue;
                         }
-
-                        this.isImgLoading = true;
-                        const pasteFile = item.getAsFile();
-                        uploadImgFile(pasteFile)
-                            .then((res) => {
-                                this.uploaded(res);
-                            })
-                            .catch((err) => {
-                                this.$message({
-                                    showClose: true,
-                                    message: err,
-                                    type: "error",
-                                });
-                            });
-                        this.isImgLoading = false;
+                        this.uploadImage(pasteFile);
                     }
                 }
             });
@@ -243,14 +226,64 @@ 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;
+            }
+
+            // 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} 图床参数`);
+                this.a = false;
+                return;
+            }
+            this.a = true;
+        },
+        uploadImage(file) {
+            this.isImgLoading = true;
+            toBase64(file)
+                .then((base64Content) => {
+                    fileApi
+                        .fileUpload(base64Content, file)
+                        .then((url) => {
+                            this.uploaded(url);
+                        })
+                        .catch((err) => {
+                            this.$message.error(err.message);
+                        });
+                })
+                .catch((err) => {
+                    this.$message.error(err.message);
+                });
+            this.isImgLoading = false;
+        },
         // 图片上传结束
         uploaded(response) {
             if (!response) {
-                this.$message({
-                    showClose: true,
-                    message: "上传图片未知异常",
-                    type: "error",
-                });
+                this.$message.error("上传图片未知异常");
                 return;
             }
             this.dialogUploadImgVisible = false;
@@ -260,11 +293,7 @@ export default {
             const markdownImage = `![](${imageUrl})`;
             // 将 Markdown 形式的 URL 插入编辑框光标所在位置
             this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
-            this.$message({
-                showClose: true,
-                message: "图片上传成功",
-                type: "success",
-            });
+            this.$message.success("图片上传成功");
             this.onEditorRefresh();
         },
         // 左右滚动

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 3/3] 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;