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

最新推荐文章于 2023-05-30 10:35:39 发布

平头的春天丶

最新推荐文章于 2023-05-30 10:35:39 发布

阅读量3.5k

点赞数 3

分类专栏： vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/qq_43061933/article/details/125316873

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<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;
          })
      },