javascript Blob API

JS Blob对象

前几天写公司的SpreadJS控件的测试用例时遇到一个需求，不通过input标签的type=file的形式来实现本地文件选择，而是直接指定自己想要上传的文件（因为模拟ui行为的测试会占用大量的时间，影响测试效率）。一开始我认为这是不可能实现的，因为浏览器的安全性原因，js是不能直接访问系统文件的（node.js除外）。ie浏览器支持使用FileSystemObject接口来访问本地文件，但是其他浏览器均没有实现。初步方案是利用后端语言去访问系统文件然后转换成base64格式返回给前端，前端将base64转成file文件。
####一、后端操作
后端语言可以很轻松地去访问本地文件，我将文件对象存入到byte数组中并转换成了base64的字符串传给前端。后端代码就不写了，很简单。

####二、.前端操作
我想通过后端的base64字符串来生成File对象的实例。这里就需要了解input标签形式的文件上传的底层原理。
####1.input生成文件对象的原理
查阅w3c的文档得知：在 HTML 文档中标签每出现一次，一个 FileUpload 对象就会被创建。
该元素包含一个文本输入字段，用来输入文件名，还有一个按钮，用来打开文件选择对话框以便图形化选择文件。当用户选择了一个或多个文件点击"打开"时，js会生成一个FileList数组来保存用户所选择的文件。FileList包含了一个或多个File对象。可以通过document.getElemenById("uploadFile").files来进行访问。处于安全性的考虑，File对象不会暴露出文件的内容，它只提供了一些只读的属性来描述修改时间、文件类型、长度、名字等。



####2.创建File对象
js有一个底层的Blob对象，它是一个包含有只读原始数据的类文件对象。File对象就继承自Blob对象并扩展了系统文件的支持。
Blob对象的构造函数（来自MDN）：

Blob Blob(
  [optional] Array parts,
  [optional] BlobPropertyBag properties
);

第一个参数是一个数组，里面可以是DOMString，也可以是TypeArray或者Blob。
这里需要解释一下TypedArray：在JS语言中，数值只有一种称为Number的类型，而不像C语言或底层CPU指令那样区分是整型还是浮点型，是有符号的还是无符号的，是32位的还是64位的。Typed Array的主要是为了弥补JS处理二进制格式数据的不足，利用Typed Array可以非常方便地操作二进制的数据。TypedArray包括Int32Array、Uint8Array、Float32Array等，也可以是连续的内存缓冲区ArrayBuffer或者工具类DataView。

var myFile=new Blob([u8arr],{type : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});

第一个参数是一个Uint8Array的TypedArray类型，它是一个8比特的无符号的int数组，通过base64转换而来。第二参数是该文件的mime类型，不同的文件类型可以参考w3c的mime手册。


####3.base64的转换
还剩最后一个问题，如何把base64转成Uint8Array?
js提供了window.atob(base64)的方式对base64进行解码。再通过charCodeAt()的方式转成Uint类型。代码如下:

var bytes=window.atob(base64),      //解码  
    n=bytes.length,
    u8arr=new Uint8Array(n),
while(n--){
    u8arr[n]=bytes.charCodeAt(n);   //将编码转换成Unicode编码
}

我对这一操作做了封装:

//假设有一个xlsx文件
function createFile(urlData){
     var bytes=window.atob(urlData),
         n=bytes.length,
         u8arr=new Uint8Array(n);
     while(n--){
          u8arr[n]=bytes.charCodeAt(n);
     }
     return new Blob([u8arr],{type:'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}});
}
var str="";   //str接收来自后端返回的base64
var myFile=createFile(str);

现在就大功告成了。前端的文件对象已经成功生成。


####4.最终测试
我在代码中创建一个链接去下载这个文件:

var a = document.createElement("a");
a.href =window.URL.createObjectURL(myFile); //下载路径指向这个文件对象 
a.download = "SunnyChuan.xlsx"; 
a.click();    //指定页面自动下载文件
document.body.appendChild(a);

页面打开后会自动下载文件:

我们把文件打开测试一下整个流程中有没有数据损失:

从图中可以看出文件完成无损地传到了前端。
这里有一个小插曲:用ie浏览器是无法下载的，因此需要做hack:

if(navigator.appVersion.toString().indexOf(".NET")>0){
     window.navigator.msSaveBlob(myFile, "SunnyChuan.xlsx");
}
else{
        var a = document.createElement("a");
        a.href =window.URL.createObjectURL(myFile); 
        a.download = "SunnyChuan.xlsx"; 
        a.click(); 
        document.body.appendChild(a);
}  

附上完整的代码:

function createFile(urlData,fileType){
     var bytes=window.atob(urlData),
         n=bytes.length,
         u8arr=new Uint8Array(n);
     while(n--){
          u8arr[n]=bytes.charCodeAt(n);
     }
     return new Blob([u8arr],{type:fileType});
}
var str="";   //str接收来自后端返回的base64
var fileType="";//指定mime
var myFile=createFile(str,fileType);
if(navigator.appVersion.toString().indexOf(".NET")>0){
     window.navigator.msSaveBlob(myFile, "SunnyChuan.xlsx");
}
else{
        var a = document.createElement("a");
        a.href =window.URL.createObjectURL(myFile); 
        a.download = "SunnyChuan.xlsx"; 
        a.click(); 
        document.body.appendChild(a);
}  

####三、总结
js一般是不可以直接访问本地文件的，但是可以通过一些间接的方式去实现。js的文件操作一般用于下载文件以及保存图片。我实习的公司就是通过将产品内部的图片转成base64，在需要使用的时候再转换回图片，这种方式不需要产品附带图片文件，产品最终只有一个js文件，极大地减少了产品尺寸。

未完后续。。。。

原文链接https://www.kancloud.cn/xiaoxiaoqc/web/188133