From 7a43a22e2e3423fb2809930001a1dcb34f94d81e Mon Sep 17 00:00:00 2001
From: yanglbme <szuyanglb@outlook.com>
Date: Tue, 31 Dec 2019 11:35:33 +0800
Subject: [PATCH] feat: add image upload format and size limitation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

受公众号限制，上传图片的大小不能超过 5M
---
 assets/scripts/editor.js | 32 +++++++++++++++++++++++++++++++-
 index.html               | 11 ++++++-----
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/assets/scripts/editor.js b/assets/scripts/editor.js
index aba6a88..1f8822b 100644
--- a/assets/scripts/editor.js
+++ b/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();
diff --git a/index.html b/index.html
index ce038c2..440c0b1 100644
--- a/index.html
+++ b/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 @@
     <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 @@
   <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>