2021-04-20 - 前端 - 文件上传 - 获取图片width/height - 学习/实践

缺乏、安全感 2023-01-14 11:59 126阅读 0赞

1.应用场景

<table> 
 <tbody> 
 <tr> 
 <td>主要用于上传图片, 获取宽度高度, 大小尺寸, 进行前端验证,从而决业务逻辑走向~</td> 
 </tr> 
 </tbody> 
</table>

2.学习/操作

<table> 
 <tbody> 
 <tr> 
 <td> 1.文档阅读 <a href="https://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript" rel="nofollow">https://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript</a>&nbsp; // StackOverflow - upload image width <a href="https://wangdoc.com/javascript/bom/file.html" rel="nofollow">https://wangdoc.com/javascript/bom/file.html</a>&nbsp; // 阮一峰 -&nbsp;&nbsp;JavaScript 教程 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image</a>&nbsp; //&nbsp; MDN - image <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width</a> //&nbsp; MDN - image - width <a href="https://www.cnblogs.com/nangezi/p/12374094.html" rel="nofollow">https://www.cnblogs.com/nangezi/p/12374094.html</a>&nbsp; //&nbsp;其他实践 &nbsp; <a href="https://mp.weixin.qq.com/s/RKBS3-yN-ukBiZiKRDJFrg" rel="nofollow">https://mp.weixin.qq.com/s/RKBS3-yN-ukBiZiKRDJFrg</a>&nbsp;//&nbsp;实战：图片上传组件开发&nbsp;&nbsp;2018-02-03 &nbsp; 2.整理输出 方式一: 
 <blockquote> 
 var _URL = window.URL || window.webkitURL; $("#file").change(function (e) { &nbsp; &nbsp; var file, img; &nbsp; &nbsp; if ((file = this.files[0])) { &nbsp; &nbsp; &nbsp; &nbsp; img = new Image(); &nbsp; &nbsp; &nbsp; &nbsp; var objectUrl = _URL.createObjectURL(file); &nbsp; &nbsp; &nbsp; &nbsp; img.onload = function () { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert(this.width + " " + this.height); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; _URL.revokeObjectURL(objectUrl); &nbsp; &nbsp; &nbsp; &nbsp; }; &nbsp; &nbsp; &nbsp; &nbsp; img.src = objectUrl; &nbsp; &nbsp; } }); 
 </blockquote> 方式二: 
 <blockquote> 
 var reader = new FileReader(); 
 //Read the contents of Image File. reader.readAsDataURL(fileUpload.files[0]); reader.onload = function (e) { 
 &nbsp; //Initiate the JavaScript Image object. &nbsp; var image = new Image(); 
 &nbsp; //Set the Base64 string return from FileReader as source. &nbsp; image.src = e.target.result; 
 &nbsp; //Validate the File Height and Width. &nbsp; image.onload = function () { &nbsp; &nbsp; var height = this.height; &nbsp; &nbsp; var width = this.width; &nbsp; &nbsp; if (height &gt; 100 || width &gt; 100) { &nbsp; &nbsp; &nbsp; alert("Height and Width must not exceed 100px."); &nbsp; &nbsp; &nbsp; return false; &nbsp; &nbsp; } &nbsp; &nbsp; alert("Uploaded image has valid Height and Width."); &nbsp; &nbsp; return true; &nbsp; }; }; 
 </blockquote> 方式三: 
 <blockquote> 
 let img = new Image() img.src = window.URL.createObjectURL(event.target.files[0]) img.onload = () =&gt; { &nbsp; &nbsp;alert(img.width + " " + img.height); } 
 &nbsp; 
 // Check for specific size. Using 100 x 100 as example 
 &nbsp; 
 let img = new Image() img.src = window.URL.createObjectURL(event.target.files[0]) img.onload = () =&gt; { &nbsp; &nbsp;if(img.width === 100 &amp;&amp; img.height === 100){ &nbsp; &nbsp; &nbsp; &nbsp; alert(`Nice, image is the right size. It can be uploaded`) &nbsp; &nbsp; &nbsp; &nbsp; // upload logic here &nbsp; &nbsp; &nbsp; &nbsp; } else { &nbsp; &nbsp; &nbsp; &nbsp; alert(`Sorry, this image doesn't look like the size we wanted. It's&nbsp; &nbsp; &nbsp;${img.width} x ${img.height} but we require 100 x 100 size image.`); &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } &nbsp; 
 </blockquote> &nbsp; 在线练习: <a href="http://jsfiddle.net/4N6D9/1/" rel="nofollow">http://jsfiddle.net/4N6D9/1/</a> 截图: <img alt="" height="831" src="https://img-blog.csdnimg.cn/20210420173930691.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dpbGxpYW1fbg==,size_16,color_FFFFFF,t_70" width="1200"> &nbsp; &nbsp; 开发中代码实现: src\components\common\company-photo\validatePhoto.ts 
 <blockquote> 
 import&nbsp;{&nbsp;PhotoType&nbsp;}&nbsp;from&nbsp;"src/types"; 
 &nbsp; 
 type&nbsp;TValidateType&nbsp;=&nbsp;'format'&nbsp;|&nbsp;'miniWidth'; 
 &nbsp; 
 export&nbsp;default&nbsp;function&nbsp;validateUploadPhoto(file:&nbsp;File,&nbsp;photoName:&nbsp;PhotoType)&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;new&nbsp;Promise((resolve,&nbsp;reject)&nbsp;=&gt;&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;errorMsg:&nbsp;string[]&nbsp;=&nbsp;[]; 
 &nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;supportImgSet&nbsp;=&nbsp;['gif',&nbsp;'jpeg',&nbsp;'jpg',&nbsp;'png']; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;imageType&nbsp;=&nbsp;file.type.split('/')[1]; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(supportImgSet.indexOf(imageType)&nbsp;===&nbsp;-1)&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorMsg.push(getValidationMsg('format',&nbsp;photoName)); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(file.size&nbsp;&gt;&nbsp;2&nbsp;*&nbsp;1024&nbsp;*&nbsp;1024)&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorMsg.push('Too&nbsp;large&nbsp;image&nbsp;file'); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
 &nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;miniWidthLimitSet&nbsp;=&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;logos:&nbsp;70, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;banners:&nbsp;450, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;photos:&nbsp;115, 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
 &nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;img&nbsp;=&nbsp;new&nbsp;Image(); 
 &nbsp; &nbsp; &nbsp; &nbsp; const self = img; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img.onload&nbsp;=&nbsp;function&nbsp;()&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;const&nbsp;targetImgLimitWidth&nbsp;=&nbsp;miniWidthLimitSet[photoName]; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;if&nbsp;(self.width&nbsp;&lt;&nbsp;targetImgLimitWidth)&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorMsg.push(getValidationMsg('miniWidth',&nbsp;photoName,&nbsp;targetImgLimitWidth)); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject(errorMsg); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}else{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;resolve(''); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img.onerror&nbsp;=&nbsp;function&nbsp;()&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;errorMsg.push(`Not&nbsp;a&nbsp;valid&nbsp;image&nbsp;file.`); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;reject(errorMsg); 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;img.src&nbsp;=&nbsp;URL.createObjectURL(file); 
 &nbsp;&nbsp;&nbsp;&nbsp;}) 
 } 
 &nbsp; 
 const&nbsp;getValidationMsg&nbsp;=&nbsp;(validationType:&nbsp;TValidateType,&nbsp;photoName:&nbsp;string,&nbsp;miniWidth?:&nbsp;number):&nbsp;string&nbsp;=&gt;&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;let&nbsp;msg&nbsp;=&nbsp;''; 
 &nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;switch&nbsp;(validationType)&nbsp;{ 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'format': 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg&nbsp;=&nbsp;`The&nbsp;${photoName}&nbsp;File&nbsp;must&nbsp;be&nbsp;a&nbsp;file&nbsp;of&nbsp;type:&nbsp;gif,&nbsp;jpeg,&nbsp;jpg,&nbsp;png.`; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;case&nbsp;'miniWidth': 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;msg&nbsp;=&nbsp;`The&nbsp;image&nbsp;uploaded&nbsp;must&nbsp;have&nbsp;a&nbsp;width&nbsp;greater&nbsp;than&nbsp;${miniWidth}&nbsp;pixels.&nbsp;Please&nbsp;upload&nbsp;a&nbsp;larger&nbsp;image.`; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;default: 
 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;break; 
 &nbsp;&nbsp;&nbsp;&nbsp;} 
 &nbsp; 
 &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;msg; 
 } 
 </blockquote> 调用: //&nbsp;对比是否使用async/await: 
 <blockquote> 
 未使用async/await: 
 const ret = validateUploadPhoto(file, photoType); ret.then(() =&gt; { &nbsp; // Optimization: Just update photo when already has old photo. &nbsp; if (getImage()) { &nbsp; &nbsp; remoteRemove(photoId); &nbsp; } 
 &nbsp; remoteUpload(file); &nbsp; setErrorMsg([]); }) .catch(errMsg =&gt; { &nbsp; console.error(errMsg); &nbsp; setErrorMsg(errMsg); }); 
 &nbsp; 
 &nbsp; 
 使用async/await: 
 const file = files[0]; 
 try { &nbsp; await validateUploadPhoto(file, photoType); &nbsp; // Optimization: Just update photo when already has old photo. &nbsp; if (getImage()) { &nbsp; &nbsp; remoteRemove(photoId); &nbsp; } &nbsp; remoteUpload(file); &nbsp; if (errorMsg !== []) { &nbsp; &nbsp; setErrorMsg([]); &nbsp; } } catch (errMsg) { &nbsp; setErrorMsg(errMsg); } 
 </blockquote> 目前一切正常~~ &nbsp; &nbsp; 后续补充 ... </td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

3.问题/补充

4.参考

<table> 
 <tbody> 
 <tr> 
 <td> <a href="https://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript" rel="nofollow">https://stackoverflow.com/questions/8903854/check-image-width-and-height-before-upload-with-javascript</a>&nbsp; // StackOverflow - upload image width <a href="https://wangdoc.com/javascript/bom/file.html" rel="nofollow">https://wangdoc.com/javascript/bom/file.html</a>&nbsp; // 阮一峰 -&nbsp;&nbsp;JavaScript 教程 <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image</a>&nbsp; //&nbsp; MDN - image <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/width</a> //&nbsp; MDN - image - width <a href="https://www.cnblogs.com/nangezi/p/12374094.html" rel="nofollow">https://www.cnblogs.com/nangezi/p/12374094.html</a>&nbsp; //&nbsp;其他实践 </td> 
 </tr> 
 </tbody> 
</table>

后续补充

...