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] 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();
         },
         // 左右滚动