万象更新 Html5 - es6 基础: blob

源码 https://github.com/webabcd/Html5
作者 webabcd

万象更新 Html5 - es6 基础: blob

示例如下:

es6\src\basic\blob.js

/**
 * blob - Binary Large Object
 *
 * arrayBuffer - 内存中的一段二进制数据,可以以字节为单位对其处理
 * blob - 一个不可变的文件对象,只能作为一个整体处理
 *
 *
 */

let a = ['webabcd'];
// 自己构造 blob 对象时,第一个参数是一个数组,其成员可以是字符串或 arrayBuffer 或 blob 等
// 一般是不需要自己构造 blob 对象的,通常都是从 XMLHttpRequest 或 fetch() 或 <input type='file' /> 获取 blob 对象,然后再做相关处理的
let b = new Blob(a, {type : 'text/plain'});
console.log(b.type, b.size);

// blob 就是一个文件对象,需要通过 FileReader 处理
let reader = new FileReader();
// 读取 blob 完成了
reader.onload = (e) => {
    console.log("onload", e);
    console.log("reader.result", reader.result);
};
// 读取 blob 出错了
reader.onerror = (e) => {
    console.log("onerror", e);
};
// 读取 blob 时,读取进度更新了
reader.onprogress = (e) => {
    console.log("onprogress", e);
};
/**
 * reader.readAsText(blob);         将 blob 对象转换为文本数据,然后在 onload 中通过 reader.result 获取结果
 * reader.readAsArrayBuffer(blob);  将 blob 对象转换为 arrayBuffer 数据,然后在 onload 中通过 reader.result 获取结果
 * reader.readAsDataURL(blob);      将 blob 对象转换为 base64 数据,然后在 onload 中通过 reader.result 获取结果(结果类似 data:text/plain;base64,d2ViYWJjZA==)
 * reader.readAsBinaryString(blob); 将 blob 对象转换为二进制字符串数据,然后在 onload 中通过 reader.result 获取结果
 */
reader.readAsText(b);


/**
 * window.URL.createObjectURL(blob) - 浏览器可以为指定的 blob 对象生成一个临时 url 以便使用
 */
let c = window.URL.createObjectURL(b); // 结果类似 blob:http://localhost:63342/241ccac3-7f5c-42d1-a2b0-e539c99235ee
document.write(`<a href='${c}'>click me</a>`); // 浏览器跳转到这个 url 后会显示 webabcd

源码 https://github.com/webabcd/Html5
作者 webabcd

posted @ 2024-09-24 11:24  webabcd  阅读(5)  评论(0编辑  收藏  举报