|
关于fileReader的一个坑在用fileReader做图片浏览时， 使用base64格式 var file=this.$refs.resource.files[0]var reader = new FileReader();// 以DataURL的形式读取文件:reader.readAsDataURL(file); //读取后的回调js是多线程reader.onloadend=(e)=>{}Javascript 本身是单线程的，并没有异步的特性。由于 Javascript 的运用场景是浏览器，浏览器本身是典型的 GUI 工作线程，GUI 工作线程在绝大多数系统中都实现为事件处理，避免阻塞交互，因此产生了Javascript 异步基因。此后种种都源于此。 没错，网络，文件。。。。都是基于浏览器的接口实现的 如果两次读取的都 是相同的文件，并不会执行加载完成事件。
fileReader在ios上面的坑（图片转base64）最近在做项目，传图片这是很老的功能了，然后想压图片直接传base64...一开始用的代码 var fileUpload = function(obj, callback){ //检测浏览器是否支持FileReader对象 if(typeof FileReader == "undefined"){ alert("您的浏览器不支持FileReader对象！"); } var file = obj; //判断类型是不是图片 if(!/image///w+/.test(file.type)){ alert("请确保文件为图像类型"); return false; } var reader = new FileReader(); reader.onload = function (e) { var img = new Image, width = 95, //图片resize宽度 quality = 0.2, //图像质量 canvas = document.createElement('canvas'), drawer = canvas.getContext("2d"); img.src = this.result; var scale = parseInt(img.height / img.width); img.width=width; img.height = width * scale; canvas.width = img.width; canvas.height = img.height; drawer.drawImage(testimgId, 0, 0, canvas.width, canvas.height); var base64 = canvas.toDataURL('image/jpeg', 0.2); console.log(base64); var image_base64 = img.src.replace("data:image/png;base64,",""); image_base64=encodeURIComponent(image_base64); alert("19") // 调用回调 callback&&callback(img.src); } reader.readAsDataURL(file); }上面这段代码在ＰＣ和安卓上运行一切正常，但在ios上会返回固定的一串base64编码，不管你传什么图片都一样.. 然后就改…… 再改..... 查看各种文档.. 继续改... 最后是这样子决解的 function getBase64(fileObj){ var file = fileObj, cvs = document.getElementById("canvas"), ctx = cvs.getContext("2d"); if(file){ var url = window.URL.createObjectURL(file);//PS:不兼容IE var img = new Image(); img.src = url; img.onload = function(){ ctx.clearRect(0,0,cvs.width,cvs.height); cvs.width = img.width; cvs.height = img.height; ctx.drawImage(img,0,0,img.width,img.height); var base64 = cvs.toDataURL("image/png"); callback(base64); alert("20") } } }这个才是分享的重点……。 原因就是ios上不支持FileReader对象！ 以上为个人经验，希望能给大家一个参考，也希望大家多多支持51zixue.net。
下载地址:
js利用FileReader读取本地文件或者blob方式
利用Vue3封装一个弹框组件简单吗 |
