使用fileReader的一个坑及解决

admin

　　这篇文章主要介绍了使用fileReader的一个坑及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

关于fileReader的一个坑
　　在用fileReader做图片浏览时，
　　使用base64格式

2. var file=this.$refs.resource.files[0]
3. var reader = new FileReader();
4. // 以DataURL的形式读取文件:
5. reader.readAsDataURL(file);

复制代码

2. //读取后的回调js是多线程
3. reader.onloadend=(e)=>{
4. }

复制代码

　　Javascript 本身是单线程的，并没有异步的特性。由于 Javascript 的运用场景是浏览器，浏览器本身是典型的 GUI 工作线程，GUI 工作线程在绝大多数系统中都实现为事件处理，避免阻塞交互，因此产生了Javascript 异步基因。此后种种都源于此。
　　没错，网络，文件。。。。都是基于浏览器的接口实现的
　　如果两次读取的都 是相同的文件，并不会执行加载完成事件。

fileReader在ios上面的坑（图片转base64）
　　最近在做项目，传图片这是很老的功能了，然后想压图片直接传base64...一开始用的代码

2. var fileUpload = function(obj, callback){
3.             //检测浏览器是否支持FileReader对象
4.             if(typeof FileReader == "undefined"){
5.                 alert("您的浏览器不支持FileReader对象！");
6.             }
7.             var file = obj;
8.             //判断类型是不是图片
9.             if(!/image\/\w+/.test(file.type)){
10.                 alert("请确保文件为图像类型");
11.                 return false;
12.             }
13.             var reader = new FileReader();
14.             reader.onload = function (e) {
15.                 var img = new Image,
16.                     width = 95,    //图片resize宽度
17.                     quality = 0.2,  //图像质量
18.                     canvas = document.createElement('canvas'),
19.                     drawer = canvas.getContext("2d");
20.                 img.src = this.result;
21.                 var scale = parseInt(img.height / img.width);
22.                 img.width=width;
23.                 img.height = width * scale;
24.                 canvas.width = img.width;
25.                 canvas.height = img.height;
26.                 drawer.drawImage(testimgId, 0, 0, canvas.width, canvas.height);
27.                 var base64 = canvas.toDataURL('image/jpeg', 0.2);
28.                 console.log(base64);
29.                 var image_base64 = img.src.replace("data:image/png;base64,","");
30.                 image_base64=encodeURIComponent(image_base64);
31.                 alert("19")
32.                 // 调用回调
33.                 callback&&callback(img.src);
34.             }
35.             reader.readAsDataURL(file);
36.         }

复制代码

　　上面这段代码在ＰＣ和安卓上运行一切正常，但在ios上会返回固定的一串base64编码，不管你传什么图片都一样..
　　然后就改……
　　再改.....
　　查看各种文档..
　　继续改...
　　最后是这样子决解的

2. function getBase64(fileObj){
3.             var file = fileObj,
4.                 cvs = document.getElementById("canvas"),
5.                 ctx = cvs.getContext("2d");
6.             if(file){
7.                 var url = window.URL.createObjectURL(file);//PS:不兼容IE
8.                 var img = new Image();
9.                 img.src = url;
10.                 img.onload = function(){
11.                     ctx.clearRect(0,0,cvs.width,cvs.height);
12.                     cvs.width = img.width;
13.                     cvs.height = img.height;
14.                     ctx.drawImage(img,0,0,img.width,img.height);
15.                     var base64 = cvs.toDataURL("image/png");
16.                     callback(base64);
17.                     alert("20")
18.                 }
19.             }
20.         }

复制代码

　　这个才是分享的重点……。
　　原因就是ios上不支持FileReader对象！
　　以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

---