Blob和File对象API与兼容性问题

前几天在上传文件过程中遇到Blob对象和File对象的相关问题，查资料结果如下：

blob

在浏览器环境下，可以实现对blob的引用（浏览器会自动集成）；但是在nodeJS环境下如何实现blob引用？文件传入依赖？具体怎样使用blob？

要求：首先在Node环境下上传简单文件。 File是特殊类型的Blob，也是一个API接口

参考网站：https://stackoverflow.com/questions/15293694/blob-constructor-browser-compatibility

部分浏览器不支持blob，支持旧的BlobBuilder：原文如下：

So, these are actually two different problems. The Desktop Chrome warning was a bug in chrome which is fixed since 2013-03-21. Mobile Chrome is giving you a TypeError because the blob constructor is not supported. Instead you must use the old BlobBuilder API. The BlobBuilder API has browser specific BlobBuilder constructors. This is the case for FF6 - 12, Chrome 8-19, Mobile Chrome, IE10 and Android 3.0-4.2.

首先判断浏览器版本是否支持Blob（File）

var array = new Int8Array([17, -45.3]);

try{
  var jpeg = new Blob( [array], {type : "image/jpeg"});
}
catch(e){
    // TypeError old chrome and FF
    window.BlobBuilder = window.BlobBuilder || 
                         window.WebKitBlobBuilder || 
                         window.MozBlobBuilder || 
                         window.MSBlobBuilder;
    if(e.name == 'TypeError' && window.BlobBuilder){
        var bb = new BlobBuilder();
        bb.append(array.buffer);
        var jpeg = bb.getBlob("image/jpeg");
    }
    else if(e.name == "InvalidStateError"){
        // InvalidStateError (tested on FF13 WinXP)
        var jpeg = new Blob( [array.buffer], {type : "image/jpeg"});
    }
    else{
        // We're screwed, blob constructor unsupported entirely   
    }
}

结论：解决方案：blob存在一些兼容问题(仍然是主流的上传构造函数)，blobbuilder已经逐步淘汰，或者最新的Fold接口集成了blob的方法。

Blob API

Binary large Object 二进制大对象数据库中Blob就是二进制容器(MYSQL中) 在web API中，Blob对象表示类似于文件的二进制数据，File对象继承自Blob对象。

创建Blob对象：
Blob(blobParts, [options])
参数1：数组类型参数
参数2：可选，type，表示数据的类型
console.log(blob1); //输出blob对象包含数据的字节数

var blob2 = blob1.slice(start, end, contentType);
返回一个新的Blob对象，包含了原始对象中的指定范围的数据
使用：大文件分片上传

扫描二维码关注公众号，回复： 2873151 查看本文章

File对象

File API

01 浏览器兼容性检查

function isSupportFileApi() {
    if(window.File && window.FileList && window.FileReader && window.Blob) {
        return true;
    }
    return false;
}

02 获取文件句柄
JS只能被动获取文件，只有用户触发事件(拖拽文件、提交表单)JS,才能获取文件句柄
注意：拖拽事件可能会使用浏览器打开文件，需要preventDefault or cancalBable

03 读取文件
FileReader提供了接口和事件
类似于组件的生命周期，Filereader的生命周期：
onloadstart-onprogress-onload-onabort-onerror-onloaded
可以预览本地文件，预览本地图片，监控读取进度。

04 分割文件
当文件较大，分段读取上传最好(断点上传)slice方法(公司在这方面应该做的很好)