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] 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"