update: ImgUpload update

src/assets/scripts/uploadImageFile.js

@@ -0,0 +1,30 @@
+import fileApi from '../../api/file';
+
+export function uploadImgFile(file) {
+    return new Promise((resolve, reject)=> {
+        const checkImageResult = isImageIllegal(file);
+
+        if (checkImageResult) {
+            reject(checkImageResult);
+        } else {
+            let fd = new FormData();
+    
+            fd.append('file', file);
+            fileApi.fileUpload(fd).then(res => {
+                resolve(res);
+            }).catch(err => {
+                console.log(err.message)
+            })
+        }
+    });
+}
+
+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

@@ -187,15 +187,6 @@ export function saveEditorContent(editor, name) {
     }
 }
 
-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;
-}
 
 export function formatDoc(content) {
     const doc = prettier.format(content, {

src/components/CodemirrorEditor/header.vue

@@ -73,11 +73,10 @@
 import {
     downLoadMD,
     setFontSize,
-    isImageIllegal,
     fixCodeWhiteSpace,
     setColorWithCustomTemplate
 } from '../../assets/scripts/util'
-import fileApi from '../../api/file';
+import {uploadImgFile} from '../../assets/scripts/uploadImageFile';
 import {
     solveWeChatImage,
     solveHtml
@@ -151,24 +150,15 @@ export default {
         },
         // 图片上传前的处理
         beforeUpload(file) {
-            const checkImageResult = isImageIllegal(file);
+            uploadImgFile(file).then(res=> {
-
+                this.$emit('uploaded', res)
-            if (checkImageResult) {
+            }).catch(err=> {
                 this.$message({
                     showClose: true,
-                    message: checkImageResult,
+                    message: err,
                     type: 'error'
                 });
-                return false;
+            });
-            }
-            let fd = new FormData();
-
-            fd.append('file', file);
-            fileApi.fileUpload(fd).then(res => {
-                this.$emit('uploaded', res)
-            }).catch(err => {
-                console.log(err.message)
-            })
             return false;
         },
         // 复制到微信公众号

src/components/CodemirrorEditor/rightClickMenu.vue

@@ -13,9 +13,8 @@
 
 <script>
 import {
-    isImageIllegal,
+    uploadImgFile,
-} from '../../assets/scripts/util';
+} from '../../assets/scripts/uploadImageFile';
-import fileApi from '../../api/file';
 export default {
     props: {
         value: {
@@ -60,24 +59,15 @@ export default {
         // 空函数，阻断el-upload上传
         // 图片上传前的处理
         beforeUpload(file) {
-            const checkImageResult = isImageIllegal(file);
+            uploadImgFile(file).then(res=> {
-
+                this.$emit('menuTick', 'insertPic', res)
-            if (checkImageResult) {
+            }).catch(err=> {
                 this.$message({
                     showClose: true,
-                    message: checkImageResult,
+                    message: err,
                     type: 'error'
                 });
-                return false;
+            });
-            }
-            let fd = new FormData();
-
-            fd.append('file', file);
-            fileApi.fileUpload(fd).then(res => {
-                this.$emit('menuTick', 'insertPic', res)
-            }).catch(err => {
-                console.log(err.message)
-            })
             return false;
         },
     },

src/view/CodemirrorEditor.vue

@@ -61,7 +61,6 @@
     </div>
 </template>
 <script>
-import fileApi from '../api/file';
 import editorHeader from '../components/CodemirrorEditor/header';
 import aboutDialog from '../components/CodemirrorEditor/aboutDialog';
 import insertFormDialog from '../components/CodemirrorEditor/insertForm';
@@ -70,10 +69,10 @@ import {
     css2json,
     downLoadMD,
     setFontSize,
-    isImageIllegal,
     saveEditorContent,
     customCssWithTemplate
 } from '../assets/scripts/util'
+import {uploadImgFile} from '../assets/scripts/uploadImageFile';
 
 require('codemirror/mode/javascript/javascript')
 import {mapState, mapMutations} from 'vuex';
@@ -85,6 +84,7 @@ export default {
             dialogFormVisible: false,
             rightClickMenuVisible: false,
             isCoping: false,
+            isImgLoading: false,
             backLight: false,
             timeout: null,
             changeTimer: null,
@@ -131,31 +131,30 @@ export default {
 
             // 粘贴上传图片并插入
             this.editor.on('paste', (cm, e) => {
-                if (!(e.clipboardData && e.clipboardData.items)) {
+                if (!(e.clipboardData && e.clipboardData.items) || this.isImgLoading) {
-                    return
+                    return;
                 }
                 for (let i = 0, len = e.clipboardData.items.length; i < len; ++i) {
                     let item = e.clipboardData.items[i]
                     if (item.kind === 'file') {
+                        this.isImgLoading = true;
+                        this.$message({
+                            showClose: true,
+                            message: '正在加载资源'
+                        });
                         const pasteFile = item.getAsFile()
-                        const checkImageResult = isImageIllegal(pasteFile);
 
-                        if (checkImageResult) {
+                        uploadImgFile(pasteFile).then(res=> {
+                            this.uploaded(res)
+                            this.isImgLoading = false;
+                        }).catch(err=> {
                             this.$message({
                                 showClose: true,
-                                message: checkImageResult,
+                                message: err,
                                 type: 'error'
                             });
-                            return;
+                            this.isImgLoading = false;
-                        }
+                        });
-                        let data = new FormData()
-                        data.append('file', pasteFile)
-
-                        fileApi.fileUpload(data).then(res => {
-                            this.uploaded(res)
-                        }).catch(err => {
-                            console.log(err.message)
-                        })
                     }
                 }
             });