zoukankan      html  css  js  c++  java
  • vue 限制上传图片的宽高(基于iviewUI)

    1、需要效果

    2、vue代码

    <Upload
                multiple
                ref="uploadContent"
                :on-success="handleSuccess"
                :on-error="handleError"
                :format="['jpg','jpeg','png']"
                :on-format-error="handleFormatError"
                :show-upload-list="false"
                :action="uploadUrl"
                :before-upload="detailBeforeUpload"
                style="float: right">
                  <Button class="uploadFiles" >上传文件</Button>
                </Upload>       
    

    3、方法

    detailBeforeUpload(file) {
        return this.checkImageWH(file, 1280, 90);
    },
    checkImageWH(file, width, height) {
            let self = this;
            return new Promise(function (resolve, reject) {
              let filereader = new FileReader();
              filereader.onload = e => {
                let src = e.target.result;
                const image = new Image();
                image.onload = function () {
                  if (width && this.width != width) {
                    self.$Message.error('请上传宽为' + width + "px的图片");
                    reject();
                  } else if (height && this.height != height) {
                    self.$Message.error('请上传宽为' + height + "px的图片");
                    reject();
                  } else {
                    resolve();
                  }
                };
                image.onerror = reject;
                image.src = src;
              };
              filereader.readAsDataURL(file);
            });
    },
  • 相关阅读:
    AC自动机
    哈希与哈希表
    Trie字典树
    整除
    P3375 【模板】KMP字符串匹配
    KMP算法
    Luogu-P1004 方格取数
    Luogu-P2758 编辑距离
    Luogu-P1018 乘积最大
    Luogu-P1880 [NOI1995]石子合并
  • 原文地址:https://www.cnblogs.com/lxn2/p/12169840.html
Copyright © 2011-2022 走看看