Merge pull request #50 from doocs/feature_upload-component_20201204

Feature upload component 20201204

src/assets/scripts/uploadImageFile.js

@@ -1,35 +0,0 @@
-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 () {
-            const base64Content = this.result.split(",").pop();
-            fileApi
-                .fileUpload(base64Content, file)
-                .then((res) => {
-                    resolve(res);
-                })
-                .catch((err) => {
-                    reject(err);
-                });
-        };
-    });
-}
-
-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;
-}

src/assets/scripts/util.js

@@ -263,3 +263,33 @@ 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);
+    });
+
+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 };
+}

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

src/components/CodemirrorEditor/rightClickMenu.vue

@@ -19,7 +19,6 @@
 </template>
 
 <script>
-import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
 export default {
     props: {
         value: {

src/components/CodemirrorEditor/uploadImgDialog.vue

@@ -29,8 +29,8 @@
                     :multiple="true"
                     accept=".jpg, .jpeg, .png, .gif"
                     name="file"
-                    :before-upload="beforeUpload"
+                    :before-upload="beforeImageUpload"
-                    v-loading="uploadingImg"
+                    :http-request="uploadImage"
                 >
                     <i class="el-icon-upload"></i>
                     <div class="el-upload__text">
@@ -304,7 +304,7 @@
 </template>
 
 <script>
-import { uploadImgFile } from "../../assets/scripts/uploadImageFile";
+import { checkImage } from "../../assets/scripts/util";
 
 export default {
     props: {
@@ -375,7 +375,6 @@ export default {
                 },
             ],
             imgHost: "default",
-            uploadingImg: false,
         };
     },
     created() {
@@ -398,50 +397,32 @@ export default {
     methods: {
         changeImgHost() {
             localStorage.setItem("imgHost", this.imgHost);
-            this.$message({
+            this.$message.success("已成功切换图床");
-                showClose: true,
-                message: "已成功切换图床",
-                type: "success",
-            });
         },
         saveGitHubConfiguration() {
             if (!(this.formGitHub.repo && this.formGitHub.accessToken)) {
                 const blankElement = this.formGitHub.repo
                     ? "token"
                     : "GitHub 仓库";
-                this.$message({
+                this.$message.error(`参数「​${blankElement}」不能为空`);
-                    showClose: true,
-                    message: `参数「​${blankElement}」不能为空`,
-                    type: "error",
-                });
                 return;
             }
             localStorage.setItem(
                 "githubConfig",
                 JSON.stringify(this.formGitHub)
             );
-            this.$message({
+            this.$message.success("保存成功");
-                message: "保存成功",
-                type: "success",
-            });
         },
         saveGiteeConfiguration() {
             if (!(this.formGitee.repo && this.formGitee.accessToken)) {
                 const blankElement = this.formGitee.repo
                     ? "私人令牌"
                     : "Gitee 仓库";
-                this.$message({
+                this.$message.error(`参数「​${blankElement}」不能为空`);
-                    showClose: true,
-                    message: `参数「​${blankElement}」不能为空`,
-                    type: "error",
-                });
                 return;
             }
             localStorage.setItem("giteeConfig", JSON.stringify(this.formGitee));
-            this.$message({
+            this.$message.success("保存成功");
-                message: "保存成功",
-                type: "success",
-            });
         },
         saveAliOSSConfiguration() {
             if (
@@ -452,21 +433,14 @@ export default {
                     this.formAliOSS.region
                 )
             ) {
-                this.$message({
+                this.$message.error(`阿里云 OSS 参数配置不全`);
-                    showClose: true,
-                    message: `阿里云 OSS 参数配置不全`,
-                    type: "error",
-                });
                 return;
             }
             localStorage.setItem(
                 "aliOSSConfig",
                 JSON.stringify(this.formAliOSS)
             );
-            this.$message({
+            this.$message.success("保存成功");
-                message: "保存成功",
-                type: "success",
-            });
         },
 
         saveTxCOSConfiguration() {
@@ -478,18 +452,11 @@ export default {
                     this.formTxCOS.region
                 )
             ) {
-                this.$message({
+                this.$message.error(`腾讯云 COS 参数配置不全`);
-                    showClose: true,
-                    message: `腾讯云 COS 参数配置不全`,
-                    type: "error",
-                });
                 return;
             }
             localStorage.setItem("txCOSConfig", JSON.stringify(this.formTxCOS));
-            this.$message({
+            this.$message.success("保存成功");
-                message: "保存成功",
-                type: "success",
-            });
         },
 
         saveQiniuConfiguration() {
@@ -502,44 +469,35 @@ export default {
                     this.formQiniu.region
                 )
             ) {
-                this.$message({
+                this.$message.error(`七牛云 Kodo 参数配置不全`);
-                    showClose: true,
-                    message: `七牛云 Kodo 参数配置不全`,
-                    type: "error",
-                });
                 return;
             }
             localStorage.setItem("qiniuConfig", JSON.stringify(this.formQiniu));
-            this.$message({
+            this.$message.success("保存成功");
-                message: "保存成功",
-                type: "success",
-            });
         },
 
-        // 图片上传前的处理
+        beforeImageUpload(file) {
-        beforeUpload(file) {
+            // check image
-            const imgHost = localStorage.getItem("imgHost");
+            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`);
-            if (!config && imgHost !== "" && imgHost !== "default") {
+            const isValidHost = imgHost == "default" || config;
+            if (!isValidHost) {
                 this.$message.error(`请先配置 ${imgHost} 图床参数`);
                 return false;
             }
-
+            return true;
-            this.uploadingImg = true;
+        },
-            uploadImgFile(file)
+        uploadImage(params) {
-                .then((res) => {
+            this.$emit("uploadImage", params.file);
-                    this.$emit("uploaded", res);
-                    this.uploadingImg = false;
-                })
-                .catch((err) => {
-                    this.uploadingImg = false;
-                    this.$message({
-                        showClose: true,
-                        message: err,
-                        type: "error",
-                    });
-                });
-            return false;
         },
     },
 };

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

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);
     },

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"
@@ -73,6 +73,8 @@
         <upload-img-dialog
             v-model="dialogUploadImgVisible"
             @close="dialogUploadImgVisible = false"
+            @beforeUpload="beforeUpload"
+            @uploadImage="uploadImage"
             @uploaded="uploaded"
         />
         <about-dialog v-model="aboutDialogVisible" />
@@ -100,8 +102,11 @@ import {
     setFontSize,
     saveEditorContent,
     customCssWithTemplate,
+    checkImage,
 } 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";
@@ -174,37 +179,14 @@ export default {
                     ++i
                 ) {
                     let item = e.clipboardData.items[i];
-
                     if (item.kind === "file") {
                         // 校验图床参数
-                        const imgHost =
+                        const pasteFile = item.getAsFile();
-                            localStorage.getItem("imgHost") || "default";
+                        const isValid = this.beforeUpload(pasteFile);
-                        if (
+                        if (!isValid) {
-                            imgHost != "default" &&
-                            !localStorage.getItem(`${imgHost}Config`)
-                        ) {
-                            this.$message({
-                                showClose: true,
-                                message: "请先配置好图床参数",
-                                type: "error",
-                            });
                             continue;
                         }
-
+                        this.uploadImage(pasteFile);
-                        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;
                     }
                 }
             });
@@ -243,14 +225,49 @@ export default {
             });
             this.onEditorRefresh();
         },
+        beforeUpload(file) {
+            // validate 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(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({
+                this.$message.error("上传图片未知异常");
-                    showClose: true,
-                    message: "上传图片未知异常",
-                    type: "error",
-                });
                 return;
             }
             this.dialogUploadImgVisible = false;
@@ -260,11 +277,7 @@ export default {
             const markdownImage = `![](${imageUrl})`;
             // 将 Markdown 形式的 URL 插入编辑框光标所在位置
             this.editor.replaceSelection(`\n${markdownImage}\n`, cursor);
-            this.$message({
+            this.$message.success("图片上传成功");
-                showClose: true,
-                message: "图片上传成功",
-                type: "success",
-            });
             this.onEditorRefresh();
         },
         // 左右滚动