常德做网站报价,化妆品企业网站建设,货架 网站建设 牛商网,推广自己的店铺推广语本文节选自 Awesome CheatSheet/DOM CheatSheet#xff0c;主要是对 DOM 操作中常见的 Blob、File API 相关概念进行简要描述。
Web 开发中 Blob 与 FileAPI 使用简述
Blob 是 JavaScript 中的对象#xff0c;表示不可变的类文件对象#xff0c;里面可以存储大量的二进制编…本文节选自 Awesome CheatSheet/DOM CheatSheet主要是对 DOM 操作中常见的 Blob、File API 相关概念进行简要描述。
Web 开发中 Blob 与 FileAPI 使用简述
Blob 是 JavaScript 中的对象表示不可变的类文件对象里面可以存储大量的二进制编码格式的数据。Blob 对象的创建方式与其他并无区别构造函数可接受数据序列与类型描述两个参数
const debug { hello: world };
let blob new Blob([JSON.stringify(debug, null, 2)], {type: application/json
});
// Blob(22) {size: 22, type: application/json}// 也可以转化为类 URL 格式
const url URL.createObjectURL(blob);
// blob:https://developer.mozilla.org/88c5b6de-3735-4e02-8937-a16cc3b0e852// 设置自定义的样式类
blob new Blob([body { background-color: yellow; }], {type: text/css
});link document.createElement(link);
link.rel stylesheet;
//createObjectURL returns a blob URL as a string.
link.href URL.createObjectURL(blob);其他的类型转化为 Blob 对象可以参考 covertToBlob.js将 Base64 编码的字符串或者 DataUrl 转化为 Blob 对象。Blob 包括了 size 与 type以及常用的用于截取的 slice 方法等属性。Blob 对象能够添加到表单中作为上传数据使用
const content a idab idbhey!/b/a; // the body of the new file...
const blob new Blob([content], { type: text/xml });formData.append(webmasterfile, blob);slice 方法会返回一个新的 Blob 对象包含了源 Blob 对象中指定范围内的数据。其实就是对这个 blob 中的数据进行切割我们在对文件进行分片上传的时候需要使用到这个方法即把一个需要上传的文件进行切割然后分别进行上传到服务器
const BYTES_PER_CHUNK 1024 * 1024; // 每个文件切片大小定为1MB .
const blob document.getElementById(file).files[0];
const slices Math.ceil(blob.size / BYTES_PER_CHUNK);
const blobs [];
Array.from({ length: slices }).forEach(function(item, index) {blobs.push(blob.slice(index, index 1));
});这里我们使用的 blob 对象实际上是 HTML5 中的 File 对象HTML5 File API 允许我们对本地文件进行读取、上传等操作主要包含三个对象FileFileList 与用于读取数据的 FileReader。File 对象就是 Blob 的分支或者说子集表示包含某些元数据的单一文件对象FileList 即是文件对象的列表。FileReader 能够用于从 Blob 对象中读取数据包含了一系列读取文件的方法与事件回调其基本用法如下
const reader new FileReader();
reader.addEventListener(loadend, function() {// reader.result 包含了 Typed Array 格式的 Blob 内容
});
reader.readAsArrayBuffer(blob);blob new Blob([This is my blob content], { type: text/plain });
read.readAsText(bolb); // 读取为文本// reader.readAsArrayBuffer //将读取结果封装成 ArrayBuffer 如果想使用一般需要转换成 Int8Array 或 DataView
// reader.readAsBinaryString // 在IE浏览器中不支持改方法
// reader.readAsTex // 该方法有两个参数其中第二个参数是文本的编码方式默认值为 UTF-8
// reader.readAsDataURL // 读取结果为DataURL
// reader.readyState // 上传中的状态在图片上传中我们常常需要获取到本地图片的预览参考 antd/Upload 中的处理
// 将文件读取为 DataURL
const previewFile (file: File, callback: Function) {const reader new FileReader();reader.onloadend () callback(reader.result);reader.readAsDataURL(file);
};// 设置文件的 DataUrl
previewFile(file.originFileObj, (previewDataUrl: string) {file.thumbUrl previewDataUrl;
});// JSX
img src{file.thumbUrl || file.url} alt{file.name} /;另一个常用的场景就是获取剪贴板中的图片并将其预览展示可以参考 coding-snippets/image-paste:
const cbd e.clipboardData;
const fr new FileReader();for (let i 0; i cbd.items.length; i ) {const item cbd.items[i];if (item.kind file) {const blob item.getAsFile();if (blob.size 0) {return;}previewFile(blob);}
}标准的 Web 标准中提供了 FileReader 对象进行读取操作不过 Chrome 中提供了 FileWriter 对象允许我们在浏览器沙盒中创建文件其基于 requestFileSystem 方法
// 仅可用于 Chrome 浏览器中
window.requestFileSystem window.requestFileSystem || window.webkitRequestFileSystem;window.requestFileSystem(type, size, successCallback, opt_errorCallback);简单的文件创建与写入如下所示
function onInitFs(fs) {fs.root.getFile(log.txt,{ create: true },function(fileEntry) {// Create a FileWriter object for our FileEntry (log.txt).fileEntry.createWriter(function(fileWriter) {fileWriter.onwriteend function(e) {console.log(Write completed.);};fileWriter.onerror function(e) {console.log(Write failed: e.toString());};// Create a new Blob and write it to log.txt.var blob new Blob([Lorem Ipsum], { type: text/plain });fileWriter.write(blob);}, errorHandler);},errorHandler);
}window.requestFileSystem(window.TEMPORARY, 1024 * 1024, onInitFs, errorHandler);
相关文章：
