根據圖片url連接判斷圖片大小

1、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>

 

2、inputOnChange做用：獲取value

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

 

3、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代加工

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