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

 

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-05-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-10-27
  • 2022-12-23
猜你喜欢
  • 2022-02-11
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-05-26
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案