标签：url image xhr blob 图片大小 judgeImageSizeByUrl 链接 size

一、UI实现

<div className={less.detection}>
	<input className={less.input} placeholder="请输入图片URL" onChange={(e) => this.inputOnChange(e)} />
	<button type="button" className={less.button} onClick={(e) => this.identifyImage(e, inputUrl, 0)}>检测</button>
</div>

二、inputOnChange作用：获取value

inputOnChange(e) {
	this.setState({
	  inputUrl: e.target.value,
	});
};

三、identifyImage中校验图片链接格式和大小，我这边是分步校验的；

• 第一步：检验url是否正确，用正则；
• 第二步：检验是否有jpg/jpeg/png后缀；(这个其实真正的目的是想校验是否上传的是图片链接，这样写可能不好)
• 第三步：判断图片大小；

const urlRegexp = /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/;

identifyImage(e, image, index) {
	if (e && e.preventDefault) {
	  e.preventDefault();
	}
	if (urlRegexp.test(image)) {
	  if (!((image.indexOf('.jpg') !== -1) || (image.indexOf('.jpeg') !== -1) || (image.indexOf('.png') !== -1))) {
	    Message.error('请输入正确的图片url');
	    return;
	  }
	  // 判断图片大小【Note:图片和项目必须是同源的，否则会报跨域错误】
	  this.judgeImageSizeByUrl('../../../static/1.png').then(result => {
		  // result.size是字节，2M=2097152字节
		  if (result.size > 2097152) {
			this.handleImageErrorMsg('图片文件过大，请选择2MB以下的图');
		  } else {
			// ......
		  }
    	});
	}
};

http://www.ssnd.com.cn 化妆品OEM代加工

四、judgeImageSizeByUrl判断文件大小

先前我以为最简单的办法，直接将url转换成blob对象，获取blob.size来比较；

其实不然，这种是错误的

judgeImageSizeByUrl(url) {
let blob = new Blob([url]);
	if (blob.size > 2048) {
	  this.setState({
	    imageErrorMsg: '图片文件过大，请选择2MB以下的图',
	  });
	  return false;
	}
}

正确的方法如下 (Note: 图片必须是同源的(即项目和图片必须是同源的))

judgeImageSizeByUrl = (url) => {
    return new Promise((resolve, reject) => {
      let xhr = new XMLHttpRequest();
      xhr.open('GET', url);
      xhr.responseType = 'blob';
      xhr.onerror = () => {
        reject();
      };
      xhr.onload = () => {
        if (xhr.status === 200) {
          resolve(xhr.response);
        } else {
          reject();
        }
      };
      xhr.send();
    });
}

标签：url,image,xhr,blob,图片大小,judgeImageSizeByUrl,链接,size
来源： https://www.cnblogs.com/moluy/p/15004477.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。