Element upload 限制上传图片尺寸、大小、比例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<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： 

handleAvatarSuccess(res, file) {
  console.log(res)
  console.log(file)
  this.imageUrl = URL.createObjectURL(file.raw);
  //
  if (res.code !== 200) {
    this.$message.error('上传失败！')
  } else {
    this.isShowRequest = false
    this.isLoad = false
    this.modalForm.logoId = res.body.fileId
    this.modalForm.logoPath = res.body.filePath
  }
},
beforeAvatarUpload(file) {
  console.log(file)
  const isJpgPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'

  if (!isJpgPng) {
    // this.$message.error('上传文件格式只能是jpg/png')
    this.isLoad = true
    this.errText = '上传文件格式只能是jpg/png/gif'
    // let _t = this
    // setTimeout(function () {
    //   _t.isLoad = false
    // },3000)
    return false
  }

  const isLt1M = file.size / 1024 / 1024 < 1
  if (!isLt1M) {
    // this.$message.error('上传图片大小不能超过 1MB!')
    this.isLoad = true
    this.errText = '上传图片大小不能超过 1MB!'
    // let _t = this
    // setTimeout(function(){
    //   _t.isLoad = false
    // },3000)
    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 / img.height === 1.67;
      valid ? resolve() : reject();
    }
    img.src = _URL.createObjectURL(file);
  }).then(()=>{
    return file;
  }, ()=>{
    // this.$message({
    //   message:'上传图片比例建议为5：3!请重新选择!'
    // });
    this.isLoad = true
    this.errText = '上传图片比例只能为5:3, 请重新选择上传!'
    return Promise.reject()
    return false;//必须加上return false; 才能阻止
  })

  return isJpgPng && isLt1M && isSize
}