feat: add image upload format and size limitation

受公众号限制，上传图片的大小不能超过 5M

Author: yanglbme

assets/scripts/editor.js

@@ -84,6 +84,9 @@ let app = new Vue({
         let item = e.clipboardData.items[i];
         if (item.kind === 'file') {
           const pasteFile = item.getAsFile();
+          if (!(this.checkType(pasteFile) && this.checkImageSize(pasteFile))) {
+            return;
+          }
           let data = new FormData();
           data.append('file', pasteFile);
           axios.post('https://imgkr.com/api/files/upload', data, {
@@ -154,6 +157,34 @@ let app = new Vue({
       });
       this.refresh();
     },
+    // 图片上传前的处理
+    beforeUpload(file) {
+      return this.checkType(file) && this.checkImageSize(file);
+    },
+    // 检查文件类型
+    checkType(file) {
+      if (!/\.(gif|jpg|jpeg|png|GIF|JPG|PNG)$/.test(file.name)) {
+        this.$message({
+          showClose: true,
+          message: '请上传 JPG/PNG/GIF 格式的图片',
+          type: 'error'
+        });
+        return false;
+      }
+      return true;
+    },
+    // 检查图片大小
+    checkImageSize(file) {
+      if (file.size > 5 * 1024 * 1024) {
+        this.$message({
+          showClose: true,
+          message: '由于公众号限制，图片大小不能超过 5.0M',
+          type: 'error'
+        });
+        return false;
+      }
+      return true;
+    },
     // 图片上传结束
     uploaded(response, file, fileList) {
       if (response.success) {
@@ -226,7 +257,6 @@ let app = new Vue({
       this.editor.replaceSelection(`\n${table}\n`, cursor);
       this.dialogFormVisible = false
       this.refresh();
-      
     },
     statusChanged() {
       this.refresh();

index.html

@@ -73,7 +73,8 @@
       <el-header class="top">
         <!-- 图片上传 -->
         <el-upload action="https://imgkr.com/api/files/upload" headers="{'Content-Type': 'multipart/form-data'}"
-          :show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file" :on-success="uploaded">
+          :show-file-list="false" :multiple="true" accept=".jpg,.jpeg,.png,.gif" name="file"
+          :before-upload="beforeUpload" :on-success="uploaded">
           <el-tooltip class="item" effect="dark" content="上传图片" placement="bottom-start">
             <i class="el-icon-upload" size="medium">&nbsp;</i>
           </el-tooltip>
@@ -175,7 +176,7 @@ <h3>一款高度简洁的微信 Markdown 编辑器</h3>
     <el-dialog title="插入表格" :visible.sync="dialogFormVisible">
       <el-form :model="form">
         <el-form-item label="行数(表头不计入行数)">
-          <el-input  v-model="form.rows"></el-input>
+          <el-input v-model="form.rows"></el-input>
         </el-form-item>
         <el-form-item label="列数">
           <el-input v-model="form.cols"></el-input>
@@ -214,9 +215,9 @@ <h3>一款高度简洁的微信 Markdown 编辑器</h3>
   <script src="assets/scripts/editor.js"></script>
   <script>
     $('#loading').hide();
-      window.console
-        && window.console.log
-        && (console.log("Think big, train fast, learn deep. See https://github.com/yanglbme"))
+    window.console
+      && window.console.log
+      && (console.log("Think big, train fast, learn deep. See https://github.com/yanglbme"))
   </script>
 </body>