Base64与BLOB互相转换

// Base64 转 Blob
function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), //分割为数组,分割到第一个逗号
    let mime = arr[0].match(/:(.*?);/)[1],//获取分割后的base64前缀中的类型
    let bstr = window.atob(arr[1]), 
    let n = bstr.length, 
    let u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime//文件类型格式 });
}
// Blob 转 Base64
function blobToDataURL(blob, callback) {
    let a = new FileReader();
    a.onload = function (e) { callback(e.target.result); }
    a.readAsDataURL(blob);
}
// 创建Blob对象(旧方法)
var builder = new BolbBuilder();
builder.append("Hello World!");
var blob = builder.getBlob("text/plain");
// 创建Blob对象(新方法)
var blob = new Blob(["Hello World!"],{type:"text/plain"});

Blob 的应用

1.大文件分割 (slice() 方法)slice() 方法接受三个参数,起始偏移量,结束偏移量,还有可选的 mime 类型。如果 mime 类型,没有设置,那么新的 Blob 对象的 mime 类型和父级一样。
2. 当要上传大文件的时候,此方法非常有用,可以将大文件分割分段,然后各自上传,因为分割之后的 Blob 对象和原始的是独立存在的。
不过目前浏览器实现此方法还没有统一,火狐使用的是 mozSlice() ,Chrome 使用的是 webkitSlice() ,其他浏览器则正常的方式 slice() 。

//兼容各浏览器的写法

function sliceBlob(blob, start, end, type) {
      type = type || blob.type;
   if (blob.mozSlice) {
          return blob.mozSlice(start, end, type);
      } else if (blob.webkitSlice) {
          return blob.webkitSlice(start, end type);
      } else {
          throw new Error("This doesn't work!");
     }
}

你可能感兴趣的:(web前端,前端,javascript,开发语言)