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;
    },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM