根据图片url链接判断图片大小
背景:产品需求,input框输入图片链接,点击检测按钮的时候需要判断该图片不超过2M
一、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(); }); }
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
利用规则引擎的M2M实现设备之间联动
利用M2M实现设备之间联动 方案设计 基于IoT物联网平台中规则引擎的M2M能力,我们可以实现设备间联动通信,技术方案如下: 1.创建产品 1.1 油烟机 创建设备通信Topic 1.2 燃气灶 创建设备通信Topic 2.注册设备 2.1 油烟机设备 2.2 燃气灶设备 注册设备,并绑定目标油烟机 3.规则引擎配置 M2M规则 3.1 处理数据 SELECT attribute('targetId') as rangehoodId, status, windPower FROM "/a****h/+/user/change/rangehood" 3.2 转发数据 4.设备开发 4.1 油烟机设备 设备端开发 const mqtt = require('aliyun-iot-mqtt'); var options = { productKey: "替
- 下一篇
Taro 3 正式版发布:开放式跨端跨框架解决方案
作者:凹凸曼 - yuche 从 Taro 第一个版本发布到现在,Taro 已经接受了来自于开源社区两年多的考验。今天我们很高兴地在党的生日发布 Taro 3(Taro Next)正式版,希望 Taro 未来的更多两年能像一名共产主义战士一样经受住更多的考验。以下是 Taro 3 的一些新增特性: 跨框架:React、Nerv、Vue 2、Vue 3、jQuery 在旧版本的 Taro,我们以微信小程序的开发规范为基准,使用 React/JSX 的方式来进行开发。而在 Taro 3,我们把这一思路量化为一个编程模型: 设微信小程序生命周期为一个 interface,不同的框架实例的生命周期虽然不尽相同,但我们可以根据框架生命周期分别新建一个 class 去 implements 小程序生命周期的 interface。相应地,小程序的组件/API/路由规范可以使用同样的思路和模型让不同框架的代码,运行在不同的端上: 在 Taro 3 中我们内置了 React、Nerv、Vue 2、Vue 3 四种框架的支持,开发者可以通过 taro init 命令创建对应的模板,并编写与框架本身生命周期...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- MySQL8.0.19开启GTID主从同步CentOS8
- SpringBoot2全家桶,快速入门学习开发网站教程
- CentOS8编译安装MySQL8.0.19
- CentOS8,CentOS7,CentOS6编译安装Redis5.0.7
- CentOS7,CentOS8安装Elasticsearch6.8.6
- Red5直播服务器,属于Java语言的直播服务器
- CentOS8安装MyCat,轻松搞定数据库的读写分离、垂直分库、水平分库
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- CentOS6,CentOS7官方镜像安装Oracle11G
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装