沐若清辰
人生如茶,浓也好,淡也好,各有味道
<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;
    },

 

posted on 2020-09-04 10:22  沐若清辰  阅读(3380)  评论(0编辑  收藏  举报