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;
        },
  • 相关阅读:
    windows7使用(2)软件安装及系统优化
    Lucene.net搜索——初识lucene
    只好代码不好色,嫁人当嫁IT男!
    数据库生成word说明文档
    搬家到cnblogs,请多关照
    轻量级的数据交换格式——初识Json(上)
    Flex之Hello world
    Flex之Hello world
    Flex之Hello world
    在 Visual C++ 中控制全局对象的初始化顺序,#pragma init_seg(compiler)
  • 原文地址:https://www.cnblogs.com/cyf-1314/p/13612336.html
Copyright © 2011-2022 走看看