背景：產品需求，input框輸入圖片連結，點選檢測按鈕的時候需要判斷該圖片不超過2M

辦公資源網址導航 https://www.wode007.com 熊貓辦公https://www.wode007.com/sites/73654.html

一、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 {
			// ......
		  }
    	});
	}
};
 

四、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();
    });