Web 开发中 Blob 与 FileAPI 使用简述
本文节选自 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 id="a"><b id="b">hey!</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 允许我们对本地文件进行读取、上传等操作,主要包含三个对象:File,FileList 与用于读取数据的 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);
Web 开发中 Blob 与 FileAPI 使用简述相关推荐
- 【笔记-node】《imooc-nodejs入门到企业web开发中的应用》
目录 课程名 备注 入门必学 nodejs入门到企业web开发中的应用 框架与工具 node.js+koa2+mysql打造前后端分离精品项目<旧岛> 项目实战 20190317-2020 ...
- 038——VUE中组件之WEB开发中组件使用场景与定义组件的方式
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- 谈谈WEB开发中的苦大难字符集问题
记得刚做javaweb开发的时候被这个编码问题搞得晕头转向,经常稀里糊涂的编码正常了一会编码又乱了.那个时候迫于项目进度大多都是知其然不知其所以然.后来有时间就把整个体系搞了个遍,终于摸通了来龙去脉. ...
- Web开发中的相对路径和绝对路径
在学习HTML的时候一定会遇到引入文件和链接跳转页面,比如:JS文件.CSS文件.Image图片.我们就会考虑是相对路径和绝对路径的问题.下面PHP程序员雷雪松就详细讲解下Web开发中的相对路径和绝对 ...
- web开发中目录路径问题的解决
web开发中目录路径问题的解决 参考文章: (1)web开发中目录路径问题的解决 (2)https://www.cnblogs.com/freeweb/p/4751403.html 备忘一下.
- java sessionstate_在Java Web开发中自定义Session
Session在存储安全性要求较高的会话信息方面是必不可少的,对于分布式Web应用自定义Session支持独立的状态服务器或集群是必须的.本文就来教大家如何在Java Web开发中自定义Session ...
- web开发中的缓存问题的研究(一)
web开发中的缓存问题的研究(一) web开发中的缓存问题的研究(二) web开发中的缓存问题的研究(三) 一般情况下,浏览器都会缓存已经访问过的页面内容,关于如何禁止浏览器缓存的介绍,在网上到处都有 ...
- Web 开发中很实用的10个效果【附源码下载】
在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...
- java web开发中Filter使用Annotation配置 (转载)
为什么80%的码农都做不了架构师?>>> 为了在java中得到request和response对象,搜索到了 <如何在Java的普通类中获取Session以及reques ...
最新文章
- 紧跟大佬的步伐:关于我亲自动手复现了恺明新作MAE这件事
- #3551. [ONTAK2010]Peaks加强版(kruskal 重构树 + 主席树)
- linux自学_shell脚本for详解
- 学习webbench需要掌握的基础知识(webbench源代码学习心得)
- linux之VMware安装Centos7
- 考研数据结构常考的代码题总结 C语言实现
- 技术族谱:软件开发相关知识体系的整理心得(图)
- Davids实操笔记:Spring Boot使用docker整合ElasticSearch ik分词搜索和拼音搜索
- uniapp使用苹果支付
- 数据结构练习题——树和二叉树(含应用题)
- 服务器RAID常见级别与JBOD概述
- Excel如何批量添加邮箱后缀
- 蓝桥杯 Python 练习题 Fibonacci数列
- window屏幕录制
- Mac配置docker镜像源
- 大江大河——通信设备商们的2019年
- java 有指针吗_java中到底有没有指针(转)
- 2022.07.10 第九小组 高小涵 学习笔记
- 【测绘程序设计】——空间直角坐标转换
- 为什么学python就让我头秃
热门文章
- 计算机二级web题目(7.1)--综合选择题1
- matlab在电磁场与电磁波中的应用,matlab在电磁场与电磁波学习中的应用.docx
- 计算机算法设计与分析考试题,《计算机算法设计与分析》习题及答案
- 丙烯怎么做成流体丙烯_韧性好强度高的聚丙烯复合材料怎么做?让人工智能来帮忙...
- 微服务之数据同步Porter 1
- Token注解防止表单的重复提交
- R语言对矩阵按某一列排序
- linux查看文件大小和查看磁盘使用情况
- Android 小項目之---Iphone拖动图片特效 (附源码)
- VC++ MSDN中的 _beginthreadex与_endthreadex 的使用例子