Selaa lähdekoodia

设置上传前判断大小

DESKTOP-SVI9JE1\muzen 1 vuosi sitten
vanhempi
commit
fa42dc1c78
1 muutettua tiedostoa jossa 37 lisäystä ja 30 poistoa
  1. 37 30
      src/components/Upload/index.vue

+ 37 - 30
src/components/Upload/index.vue

@@ -72,10 +72,19 @@ export default {
       default: 'multipartFile'
     },
     // 图片尺寸
-    width: Number,
-    height: Number,
+    width: {
+      type: Number,
+      default: null
+    },
+    height: {
+      type: Number,
+      default: null
+    },
     // 文件大小
-    size: Number
+    size: {
+      type: Number,
+      default: null
+    }
   },
   data() {
     return {
@@ -127,39 +136,37 @@ export default {
   },
   methods: {
     // 上传之前
-    beforeUpload(file) {
-      if ((this.width && this.height) || this.size) {
-        this.checked(file)
+    async beforeUpload(file) {
+      if (this.width && this.height) {
+        const data = await this.readerImg(file)
+        if (data.width !== this.width || data.height !== this.height) {
+          this.$message.error(`请上传${this.width}x${this.height}尺寸的图片`)
+          return Promise.reject(false)
+        }
       }
+
+      if (this.size && (file.size / 1024 / 1024 > this.size)) {
+        this.$message.error(`文件大小不得超过${this.size}MB`)
+        return Promise.reject(false)
+      }
+
       this.form.size = file.size
     },
 
-    // 判断图片尺寸 或 文件大小
-    checked(file) {
+    readerImg(file) {
       return new Promise((resolve, reject) => {
-        if (this.listType === 'picture-card') {
-          let reader = new FileReader()
-          reader.readAsDataURL(file)
-          reader.onload = () => {
-            let img = new Image()
-            img.src = reader.result
-            img.onload = () => {
-              if (img.width !== this.width || img.height !== this.height) {
-                this.$message.error(`请上传${this.width}x${this.height}尺寸的图片`)
-                reject(false)
-              } else {
-                resolve(true)
-              }
-            }
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => {
+          const img = new Image()
+          img.src = reader.result
+          img.onload = () => {
+            resolve({
+              width: img.width,
+              height: img.height
+            })
           }
         }
-
-        if (this.size !== '' && ((file.size / 1024 / 1024) > this.size)) {
-          this.$message.error(`文件大小不超过${this.size}`)
-          reject(false)
-        } else {
-          resolve(true)
-        }
       })
     },
 
@@ -176,7 +183,7 @@ export default {
         this.$emit('upload', this.form)
         this.title = '上传成功'
         this.type = 'success'
-      }else{
+      } else {
         this.onError()
       }
     },