10/26 14:19

商品列表 组合商品添加图片宽高验证

dist/static/css/chunk-26b86f48.0ff0b683.css

@@ -0,0 +1 @@
+.el-button--primary[data-v-194b2ba5],.el-button--primary[data-v-194b2ba5]:active,.el-button--primary[data-v-194b2ba5]:focus,.el-button--primary[data-v-194b2ba5]:hover{background:#14928a;border-color:#14928a;color:#fff}.el-row[data-v-194b2ba5]{margin-top:40px}.el-col[data-v-194b2ba5]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-right:50%}.el-input-group[data-v-194b2ba5]{width:200px;margin:0 20px}[data-v-194b2ba5] .el-tree-node__content{height:40px!important}[data-v-194b2ba5] .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.avatar-uploader .el-upload[data-v-194b2ba5]:hover{border-color:#409eff}.avatar-uploader-icon[data-v-194b2ba5]{font-size:28px;color:#8c939d;width:120px;height:120px;line-height:120px;text-align:center}.avatar[data-v-194b2ba5]{width:120px;height:120px;display:block}

dist/static/css/chunk-36eb99eb.6f59660b.css

@@ -1 +0,0 @@
-.el-button--primary[data-v-230fa150],.el-button--primary[data-v-230fa150]:active,.el-button--primary[data-v-230fa150]:focus,.el-button--primary[data-v-230fa150]:hover{background:#14928a;border-color:#14928a;color:#fff}.el-row[data-v-230fa150]{margin-top:40px}.el-col[data-v-230fa150]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:20px;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;margin-right:50%}.el-input-group[data-v-230fa150]{width:200px;margin:0 20px}[data-v-230fa150] .el-tree-node__content{height:40px!important}[data-v-230fa150] .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.avatar-uploader .el-upload[data-v-230fa150]:hover{border-color:#409eff}.avatar-uploader-icon[data-v-230fa150]{font-size:28px;color:#8c939d;width:120px;height:120px;line-height:120px;text-align:center}.avatar[data-v-230fa150]{width:120px;height:120px;display:block}

src/components/Upload/index.vue

@@ -1,128 +1,175 @@
 
 <template>
-    <div class="upload">
-        <el-upload class="avatar-uploader"
-                     style="line-height: 0;display: inline-block"
-                     action="/api-web/uploadFile"
-                     :headers="headers"
-                     :show-file-list="false"
-                     v-loading="uploadImgLoading"
-                     :accept="accept"
-                     :on-success="handleImgSuccess"
-                     :on-error="handleUploadImgError"
-                     :before-upload="beforeImgUpload">
-            <img v-if="imgUrl"
-                 :src="imgUrl"
-                 class="avatar" />
-            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-        </el-upload>
-    </div>
+  <div class="upload">
+    <el-upload class="avatar-uploader"
+               style="line-height: 0;display: inline-block"
+               action="/api-web/uploadFile"
+               :headers="headers"
+               :show-file-list="false"
+               v-loading="uploadImgLoading"
+               :accept="accept"
+               :on-success="handleImgSuccess"
+               :on-error="handleUploadImgError"
+               :before-upload="beforeImgUpload">
+      <img v-if="imgUrl"
+           :src="imgUrl"
+           class="avatar" />
+      <i v-else
+         class="el-icon-plus avatar-uploader-icon"></i>
+    </el-upload>
+  </div>
 </template>
 
 <script>
 import load from "@/utils/loading";
 import { getToken } from "@/utils/auth";
 export default {
-    data() {
-        return {
-            headers: {
-                Authorization: getToken()
-            },
-            uploadImgLoading: false,
-            imgUrl: null,
-        };
+  data () {
+    return {
+      headers: {
+        Authorization: getToken()
+      },
+      uploadImgLoading: false,
+      imgUrl: null,
+    };
+  },
+  props: {
+    value: {
+      // 组件状态
+      type: String,
     },
-    props: {
-        value: {
-            // 组件状态
-            type: String,
-        },
-        accept: {
-            type: String,
-            default() {
-                return '.jpg, .jpeg, .png, .gif'
-            }
-        },
-        imageSizeM: { // 默认2M
-            type: Number,
-            default() {
-                return 2
-            }
-        },
-        imageType: { // 检测类型
-            type: Object,
-            default() {
-                return {
-                    "image/png": true,
-                    "image/jpeg": true,
-                    "image/jpg": true,
-                    "image/gif": true
-                }
-            }
-        }
+    accept: {
+      type: String,
+      default () {
+        return '.jpg, .jpeg, .png, .gif'
+      }
     },
-    mounted() {
-        this.imgUrl = this.value
+    imageSizeM: { // 默认2M
+      type: Number,
+      default () {
+        return 2
+      }
     },
-    methods: {
-        beforeImgUpload (file) {
-            const isImage = this.imageType[file.type];
-            const isLt2M = file.size / 1024 / 1024 < this.imageSizeM;
-            if (!isImage) {
-                this.$message.error("只能上传图片格式!");
-            }
-            if (!isLt2M) {
-                this.$message.error(`上传图片大小不能超过 ${isLt2M}MB!`);
-            }
-            if (isImage && isLt2M) {
-                this.uploadImgLoading = true
-            }
-            return isImage && isLt2M;
-        },
-        handleUploadImgError (file) {
-            this.uploadImgLoading = false
-            this.$message.error('上传失败')
-        },
-        handleImgSuccess (res, file) {
-            this.uploadImgLoading = false
-            this.imgUrl = res.data.url
-            this.$emit('input', res.data.url)
-        },
+    imageWidthM: { // 默认2M
+      type: Number,
+      default () {
+        return null
+      }
     },
-    watch: {
-        value(newValue) {
-            this.imgUrl = newValue
+    imageHeightM: { // 默认2M
+      type: Number,
+      default () {
+        return null
+      }
+    },
+    imageType: { // 检测类型
+      type: Object,
+      default () {
+        return {
+          "image/png": true,
+          "image/jpeg": true,
+          "image/jpg": true,
+          "image/gif": true
+        }
+      }
+    }
+  },
+  mounted () {
+    this.imgUrl = this.value
+  },
+  methods: {
+    beforeImgUpload (file) {
+      const isImage = this.imageType[file.type];
+      const isLt2M = file.size / 1024 / 1024 < this.imageSizeM;
+      const imageWidth = this.imageWidthM
+      const imageHeigh = this.imageHeightM
+      console.log(file)
+      const _URL = window.URL || window.webkitURL
+      const isSize = new Promise((resolve, reject) => {
+        const img = new Image()
+        img.onload = function () {
+
+          if (imageWidth && imageHeigh) {
+            this.width === imageWidth && this.height === imageHeigh ? resolve() : reject(`请上传${imageWidth}x${imageHeigh}尺寸图片`)
+          } else if (imageWidth && !imageHeigh) {
+            this.width === imageWidth ? resolve() : reject(`请上传宽为${imageWidth}的图片`)
+          } else if (!imageWidth && imageHeigh) {
+            this.height === imageHeigh ? resolve() : reject(`请上传高为${imageHeigh}的图片`)
+          }
+          else {
+            resolve()
+          }
+
+        }
+        img.src = _URL.createObjectURL(file)
+      }).then(
+        () => {
+          return file
         },
+        (src) => {
+          this.$message.error(src);
+          this.uploadImgLoading = false
+          return Promise.reject()
+        }
+      )
+      console.log(isSize)
+
+      if (!isImage) {
+        this.$message.error("只能上传图片格式!");
+
+      }
+      if (!isLt2M) {
+        this.$message.error(`上传图片大小不能超过 ${isLt2M}MB!`);
+      }
+      if (isImage && isLt2M && isSize) {
+        this.uploadImgLoading = true
+      }
+      return isImage && isLt2M && isSize;
+    },
+    handleUploadImgError (file) {
+      this.uploadImgLoading = false
+      this.$message.error('上传失败')
+    },
+    handleImgSuccess (res, file) {
+      this.uploadImgLoading = false
+      this.imgUrl = res.data.url
+      this.$emit('input', res.data.url)
     },
-    beforeDestroy() {
+  },
+  watch: {
+    value (newValue) {
+      this.imgUrl = newValue
     },
+  },
+  beforeDestroy () {
+  },
 };
 </script>
 
 <style lang="scss">
 /deep/.avatar-uploader .el-upload,
 /deep/.upload-demo .el-upload {
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
 }
 .avatar-uploader .el-upload:hover {
-    border-color: #409eff;
+  border-color: #409eff;
 }
 .avatar-uploader-icon {
-    border: 1px dashed #d9d9d9;
-    font-size: 28px;
-    color: #8c939d;
-    width: 120px;
-    height: 120px;
-    line-height: 120px;
-    text-align: center;
+  border: 1px dashed #d9d9d9;
+  font-size: 28px;
+  color: #8c939d;
+  width: 120px;
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
 }
 .avatar {
-    width: 120px;
-    height: 120px;
-    display: block;
+  width: 120px;
+  height: 120px;
+  display: block;
 }
 .ivu-upload {
   display: none;

src/views/businessManager/shopManager/shopList.vue

@@ -377,7 +377,9 @@
         <el-form-item label="商品图片"
                       prop="image"
                       :label-width="formLabelWidth">
-          <upload v-model="form.image"></upload>
+          <upload v-model="form.image"
+                  :imageWidthM='400'
+                  :imageHeightM='400'></upload>
         </el-form-item>
 
         <el-form-item label="商品描述"

src/views/businessManager/shopManager/shopOperation.vue

@@ -321,7 +321,9 @@ export default {
         }]
       },
       Fsearch: null,
-      Frules: null
+      Frules: null,
+      imageWidthM: 400,
+      imageHeightM: 400
     }
   },
   created () {
@@ -482,14 +484,44 @@ export default {
       }
       const isImage = imageType[file.type]
       const isLt2M = file.size / 1024 / 1024 < 2
+      const imageWidth = this.imageWidthM
+      const imageHeigh = this.imageHeightM
+      const _URL = window.URL || window.webkitURL
+      const isSize = new Promise((resolve, reject) => {
+        const img = new Image()
+        img.onload = function () {
 
+          if (imageWidth && imageHeigh) {
+            this.width === imageWidth && this.height === imageHeigh ? resolve() : reject(`请上传${imageWidth}x${imageHeigh}尺寸图片`)
+          } else if (imageWidth && !imageHeigh) {
+            this.width === imageWidth ? resolve() : reject(`请上传宽为${imageWidth}的图片`)
+          } else if (!imageWidth && imageHeigh) {
+            this.height === imageHeigh ? resolve() : reject(`请上传高为${imageHeigh}的图片`)
+          }
+          else {
+            resolve()
+          }
+
+        }
+        img.src = _URL.createObjectURL(file)
+      }).then(
+        () => {
+          return file
+        },
+        (src) => {
+          this.$message.error(src);
+          this.uploadImgLoading = false
+          return Promise.reject()
+        }
+      )
+      console.log(isSize)
       if (!isImage) {
         this.$message.error('只能上传图片格式!')
       }
       if (!isLt2M) {
         this.$message.error('上传头像图片大小不能超过 2MB!')
       }
-      return isImage && isLt2M;
+      return isImage && isLt2M && isSize;
     },
   }
 }