zoukankan      html  css  js  c++  java
  • element ui上传图片限制尺寸(宽、高、)大小、格式等

    <el-upload
               class="upload-demo"
               :action="uploadLi"
                :before-upload="beforeUpload"
                :on-success="handleSuccess"
                :headers="{'X-User-Token': authorization}"
                 name="file"
                 accept="image/png,image/jpg,image/jpeg,image/gif"
                 :multiple=false
                 :show-file-list=false
                  >
                  <div class="avatar" v-if="createForm.advertPic">
                       <img :src="createForm.advertPic" class="avatar_img">
                        <span>修改图标</span>
                  </div>
                 <el-button size="small" type="primary" style="height:28px;" v-else>上传</el-button>
                  <div slot="tip" class="el-upload__tip" style="margin-top:0px;">只能上传jpg/png/gif文件 750*1642px,1M以内</div>
     </el-upload>
    
    //js 方法:
     beforeUpload (file) {
          //进行图片类型和大小的限制
          var testmsg=file.name.substring(file.name.lastIndexOf('.')+1)
          const extension = testmsg === 'png'
          const extension2 = testmsg === 'jpg'
          const extension3 = testmsg === 'jpeg'
          const extension4 = testmsg === 'gif'
          const isLt2M = file.size / 1024 / 1024 < 1
          //const isLt2M = file.size / 1024  <= 500
          if(!extension && !extension2 && !extension3 && !extension4) {
            this.$message({
              message: '展会广告图只能是 png、jpg、jpeg、gif格式!',
              type: 'warning'
            });
            return false;//必须加上return false; 才能阻止
          }
          if(!isLt2M) {
            this.$message({
              message:'展会广告图大小不能超过1M!请重新选择!',
              type: 'warning'
            });
             return false;//必须加上return false; 才能阻止
          }
          const isSize = new Promise(function(resolve, reject){
              let width = 750;
              let height = 1642;
              let _URL = window.URL || window.webkitURL;
              let img = new Image();
              img.onload = function(){
                let valid = img.width == width && img.height == height;
                valid ? resolve() : reject();
              }
              img.src = _URL.createObjectURL(file);
            }).then(()=>{
              return file;
            }, ()=>{
              this.$message({
                message:'展会广告图尺寸只能是750*1642px!请重新选择!',
                type: 'warning'
              });
              return Promise.reject()
              return false;//必须加上return false; 才能阻止
            })
          return extension || extension2 || extension3 || extension4 && isLt2M && isSize;
        },
  • 相关阅读:
    HTML浏览器标题栏如何设置
    阿里团队常用的布局——双飞翼布局
    浏览器兼容性问题——IE不支持却很实用的CSS属性Outline和Child
    css选择器:基本选择器
    编程十年
    解决WX-IOS打开公众号网页出现的底部导航条
    Angular6路由复用与延迟加载的冲突解决——看看有备无患
    Ionic2 + Angular4 + JSSDK开发中的若干问题汇总
    [Linq Expression]练习自己写绑定
    [Linq To Sql]解决join时的Collation冲突
  • 原文地址:https://www.cnblogs.com/cyf-1314/p/13612336.html
Copyright © 2011-2022 走看看