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


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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM