feat(upload): 统一图片上传组件文件大小限制

src/components/SingleImage/index.vue

@@ -4,7 +4,8 @@
       class="avatar-uploader"
       action="/api/upload/image"
       :show-file-list="false"
-      :on-success="handleUploadSuccess" :on-progress="handleOverSize">
+      :on-success="handleUploadSuccess"
+      :before-upload="beforeUpload">
       <img v-if="getImg" :src="getImg" class="avatar">
       <i v-else class="el-icon-plus avatar-uploader-icon"></i>
     </el-upload>
@@ -32,6 +33,19 @@ export default {
     this.url = this.img
   },
   methods: {
+    beforeUpload(file) {
+      // 校验图片大小，限制为1MB
+      const isLt1M = file.size / 1024 / 1024 < 1
+      if (!isLt1M) {
+        Notification.error({
+          title: '失败',
+          message: '上传图片大小不能超过 1MB!',
+          duration: 2000
+        })
+        return false
+      }
+      return true
+    },
     handleUploadSuccess(response, file, fileList) {
       if (response.err_code !== 0) {
         Notification.error({
@@ -45,17 +59,6 @@ export default {
           this.handleSuccess(this.url)
         }
       }
-    },
-    handleOverSize(event, file, fileList) {
-      const overSize = file.size / 1024 < 1024
-      if (!overSize) {
-        fileList.length = 0
-        Notification.error({
-          title: '失败',
-          message: '请上传小于1M的图片',
-          duration: 2000
-        })
-      }
     }
   },
   computed: {

src/components/Tinymce/components/editorImage.vue

@@ -76,6 +76,13 @@ export default {
       }
     },
     beforeUpload(file) {
+      // 校验图片大小，限制为1MB
+      const isLt1M = file.size / 1024 / 1024 < 1
+      if (!isLt1M) {
+        this.$message.error('上传图片大小不能超过 1MB!')
+        return false
+      }
+      
       const _self = this
       const _URL = window.URL || window.webkitURL
       const fileName = file.uid
@@ -85,8 +92,13 @@ export default {
         img.src = _URL.createObjectURL(file)
         img.onload = function() {
           _self.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
+          resolve(true)
+        }
+        img.onerror = function() {
+          _self.$message.error('图片加载失败!')
+          delete _self.listObj[fileName]
+          reject(new Error('图片加载失败'))
         }
-        resolve(true)
       })
     }
   }

src/views/about/us/edit.vue

@@ -104,12 +104,13 @@ export default {
     },
 
     beforeAvatarUpload(file) {
-      // const isLt2M = file.size / 1024 / 1024 < 2
+      // 校验图片大小，限制为1MB
-
+      const isLt1M = file.size / 1024 / 1024 < 1
-      // if (!isLt2M) {
+      if (!isLt1M) {
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
+        this.$message.error('上传图片大小不能超过 1MB!')
-      // }
+        return false
-      // return isLt2M
+      }
+      return true
     },
 
  // 处理头像上传成功

src/views/announcement/edit.vue

@@ -158,12 +158,13 @@ export default {
     },
 
     beforeAvatarUpload(file) {
-      // const isLt2M = file.size / 1024 / 1024 < 2
+      // 校验图片大小，限制为1MB
-
+      const isLt1M = file.size / 1024 / 1024 < 1
-      // if (!isLt2M) {
+      if (!isLt1M) {
-      //   this.$message.error('上传图片大小不能超过 2MB!')
+        this.$message.error('上传图片大小不能超过 1MB!')
-      // }
+        return false
-      // return isLt2M
+      }
+      return true
     },
 
     /**

src/views/coach/edit.vue

@@ -26,7 +26,8 @@
           class="avatar-uploader"
           action="/api/upload/image"
           :show-file-list="false"
-          :on-success="handleWechatSuccess">
+          :on-success="handleWechatSuccess"
+          :before-upload="beforeAvatarUpload">
           <img v-if="form.wechatCode" :src="form.wechatCode" class="avatar">
           <i v-else class="el-icon-plus avatar-uploader-icon"></i>
         </el-upload>
@@ -119,12 +120,13 @@ export default {
       this.form.wechatCode = res.img
     },
     beforeAvatarUpload(file) {
-      const isLt2M = file.size / 1024 / 1024 < 0.3
+      // 校验图片大小，限制为1MB
-
+      const isLt1M = file.size / 1024 / 1024 < 1
-      if (!isLt2M) {
+      if (!isLt1M) {
-        this.$message.error('上传头像图片大小不能超过 300kb !')
+        this.$message.error('上传图片大小不能超过 1MB!')
+        return false
       }
-      return isLt2M
+      return true
     },
     // 处理头像上传成功
     handleAvatarSuccess(res, file) {

src/views/config/lanuch.vue

@@ -6,7 +6,7 @@
         <el-upload
           class="avatar-uploader"
           accept="image/*"
-          action="/api/upload/uploadImg"
+          action="/api/upload/image"
           :show-file-list="false"
           :on-success="handleSuccess"
           :before-upload="handleBefore">
@@ -41,8 +41,14 @@ export default {
     })
   },
   methods: {
-    handleBefore() {
+    handleBefore(file) {
-
+      // 校验图片大小，限制为1MB
+      const isLt1M = file.size / 1024 / 1024 < 1
+      if (!isLt1M) {
+        this.$message.error('上传图片大小不能超过 1MB!')
+        return false
+      }
+      return true
     },
     handleSuccess(res) {
       this.form.value = res.err_msg

src/views/member/add.vue

@@ -160,11 +160,13 @@ export default {
       })
     },
     beforeAvatarUpload(file) {
-      // const isLt2M = file.size / 1024 / 1024 < 2
+      // 校验图片大小，限制为1MB
-      // if (!isLt2M) {
+      const isLt1M = file.size / 1024 / 1024 < 1
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
+      if (!isLt1M) {
-      // }
+        this.$message.error('上传图片大小不能超过 1MB!')
-      // return isLt2M
+        return false
+      }
+      return true
     },
     // 处理头像上传成功
     handleAvatarSuccess(res, file) {

src/views/member/addEdit.vue

@@ -165,11 +165,13 @@ export default {
       })
     },
     beforeAvatarUpload(file) {
-      // const isLt2M = file.size / 1024 / 1024 < 2
+      // 校验图片大小，限制为1MB
-      // if (!isLt2M) {
+      const isLt1M = file.size / 1024 / 1024 < 1
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
+      if (!isLt1M) {
-      // }
+        this.$message.error('上传图片大小不能超过 1MB!')
-      // return isLt2M
+        return false
+      }
+      return true
     },
     // 处理头像上传成功
     handleAvatarSuccess(res, file) {

src/views/venue/edit.vue

@@ -553,11 +553,13 @@ export default {
     },
 
     beforeAvatarUpload(file) {
-      // const isLt2M = file.size / 1024 / 1024 < 2
+      // 校验图片大小，限制为1MB
-      // if (!isLt2M) {
+      const isLt1M = file.size / 1024 / 1024 < 1
-      //   this.$message.error('上传头像图片大小不能超过 2MB!')
+      if (!isLt1M) {
-      // }
+        this.$message.error('上传图片大小不能超过 1MB!')
-      // return isLt2M
+        return false
+      }
+      return true
     },
     // 处理头像上传成功
     handleAvatarSuccess(res, file) {

src/views/venue/lesson/edit.vue

@@ -100,7 +100,8 @@
           list-type="picture-card"
           :file-list="imgs"
           :on-remove="handleImgRemove"
-          :on-success="handleImgSuccess">
+          :on-success="handleImgSuccess"
+          :before-upload="beforeLessonImageUpload">
           <i class="el-icon-plus"></i>
         </el-upload>
       </el-form-item>
@@ -214,6 +215,15 @@ export default {
     }
   },
   methods: {
+    beforeLessonImageUpload(file) {
+      // 校验图片大小，限制为1MB
+      const isLt1M = file.size / 1024 / 1024 < 1
+      if (!isLt1M) {
+        this.$message.error('上传图片大小不能超过 1MB!')
+        return false
+      }
+      return true
+    },
     onTagChange(value) {
       if (value.length > 0) {
         saveTag(value[value.length - 1])