ant图片上传a-upload限制图片类型大小以及宽高尺寸

<a-upload
      :action="uploadAction"
      list-type="picture-card"
      :file-list="fileList"
      :beforeUpload="beforeUpload"
      v-bind="$attrs"
      :disabled="disabled"
      :remove="removeFile"
      :accept="acceptType"
      :headers="{workNo: userInfo.workNo, 'X-Access-Token': token}"
    >

JS部分

beforeUpload(file) {
    
    
	return new Promise((resolve, reject) => {
    
    
   	let isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'|| file.type === 'image/jpg';
    if (!isJpgOrPng) {
    
    
         this.$message.error('格式错误,只能上传jpg、jpeg、png');
         return reject(false);
     }
      let w = 0,h = 0;
      let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload=()=>{
    
    
	          const image = new Image();
	          image.src = reader.result;
	          image.onload=()=>{
    
    
	               w = image.width;
	               h = image.height;
	               const ratio = 670/320
	               if(w/h == ratio){
    
      // 图片比例为670*320横纵比一致
                      return resolve(true);
                   }else{
    
    
                 		this.$message.error('图片尺寸错误,只能上传670x320横纵比一致的图片');
                        return reject(false);
                            }
                        }
                  }
          let isLt1M = file.size / 10240 / 10240 <= 1;
          if (!isLt1M) {
    
    
              this.$message.error('图片大小超过10MB!');
              return reject(false);
          }
          return isJpgOrPng && isLt1M;
          })
      },

猜你喜欢

转载自blog.csdn.net/qq_43061933/article/details/125316873
今日推荐