关于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对象！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持Devmax。