作者： gauseen
原文: https://github.com/gauseen/blog
公众号【学前端】只搞技术，不搞广告文，确定不关注一下？
说一说本篇文章讲哪些点
相信在工作中经常遇到，文件上传、图片压缩、文件下载、大文件断点续传，等等关于 js 来操作文件的需求。那么你真的了解文件类型之间的转换关系吗？如下：
-
Blob-->File -
File-->DataURL（base64） -
File-->BlobURL -
HTTPURL| DataURL | BlobURL-->Blob
提示： 公众号回复 “file” 可得高清原图
Blob 类型
Blob 类型是 File 文件类型的父类，它表示一个不可变、原始数据的类文件对象
如何得到 blob 对象？
1. new Blob(array, options)
let hiBlob = new Blob([`Hi gauseen!`], { type: 'text/html' })
如上代码，就创建了一个 blob 对象，并声明了 text/html 类型 ，就像是创建一个 .html 文件。只不过它存在于浏览器的内存里。
2. fetch(url)
js 为我们提供了很多获取资源的 api，如： 和
注：
- 如果图片没加载完，就调用
drawImage，canvas 绘制将失败，所以我们简单封装了fetchImg方法，确保图片资源加载完成后再开始绘制图片。 -
由于 canvas 中的图片可能来自一些第三方网站。在不做处理的情况下，使用跨域的图片绘制时会污染画布，这是出于安全考虑。在“被污染”的画布中调用
toBlob()toDataURL()getImageData()会抛出安全警告。解决方法：
let img = new Image() // 1. 增加 crossOrigin 属性，值为 anonymous // 含义：执行一个跨域请求，在请求头里加 origin 字段 // 2. 后端要返回 Access-Control-Allow-Origin 响应头来允许跨域 img.crossOrigin = 'anonymous' img.src = 'to/path'本质就是解决跨域问题，也可以使用
nginx做个代理来解决 -
blob有slice(startIndex, endIndex)方法，复制 blob 对象某片段，与 js 数组的slice方法类似，文件的断点续传功能就是利用了改特性。
File 类型
File 包含文件的相关信息，可以通过 js 来访问其内容
如何获取 file 对象？
1. new File(bits, name[, options])
// 1. 参数是字符串组成的数组
let hiFile = new File([`Hi gauseen!`], 'fileName', { type: 'text/html' })
// 2. blob 转 file 类型
let hiBlob = new Blob([`Hi gauseen!`], { type: 'text/html' })
let hiFile = new File([ hiBlob ], 'fileName', { type: 'text/html' })
如上代码，通过 File 构造函数，创建一个 file 对象，与上面的提到的 blob 类似。可以将 blob 转成 file 类型，这意味着上面获取的 blob，可以转成 file 类型。
2. inputElement.files
通过 标签获取 file 对象
// input 上传文件时触发 change 事件
$('input').addEventListener('change', e => {
let file = e.target.files[0]
console.log('file: ', file)
})3. DragEvent.dataTransfer.files
通过拖、放获取 file 对象
将文件拖放到这里~
4. canvasElement.mozGetAsFile()
注： 截止 2020-01-13，该方法仅支持火狐浏览器
let file = canvasElement.mozGetAsFile('imgName')DataURL（base64）
DataURL，前缀为 data: 协议的 URL，可以存储一些小型数据
语法：data:[
如下，黑色 1 像素示例：
data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=上面提到的 Blob File 类型，如何“消费”它们呢？接着向下看
1. FileReader
允许 Web 应用程序异步读取存储在用户计算机上的文件（blob 或 file）。
// 将 blob 或 file 转成 DataURL（base64） 形式
fileReader(someFile).then(base64 => {
console.log('base64: ', base64)
})
function fileReader (blob) {
return new Promise((resolve, reject) => {
let reader = new FileReader()
reader.onload = (e) => {
resolve(e.target.result)
}
reader.readAsDataURL(blob)
})
}2. convasElement.toDataURL()
可以通过 canvas 图像处理能力，将图片转成 dataURL 形式。在上面 Blob 部分讲解中，代码已实现。
BlobURL(ObjectURL)
BlobURL 也叫 ObjectURL，它可以让只支持 URL 协议的 Api（如：