.dat文件写入byte类型数组_来聊聊如何对文件进行读取、裁剪、下载

点击上方“ 前端印象 ”，选择“ 设为星标 ” 第一时间关注技术干货！

最开始的一个小需求

前两天项目中有个小需求：前端下载后台小哥返回的二进制流文件。

起初接到这个需求时，我感觉这很简单啊(虽然我不会，但可以百度啊，，，，)

然后就写出了如下的代码：

let blob = new Blob([res.data]);let fileName = `Cosen.csv`;if (window.navigator.msSaveOrOpenBlob) {  navigator.msSaveBlob(blob, fileName);} else {  let link = document.createElement("a");  let evt = document.createEvent("HTMLEvents");  evt.initEvent("click", false, false);  link.href = URL.createObjectURL(blob);  link.download = fileName;  link.style.display = "none";  document.body.appendChild(link);  link.click();  window.URL.revokeObjectURL(link.href);}

这一段代码，我大概强行解释一下：

首先判断window.navigator.msSaveOrOpenBlob是为了兼容IE(谁要兼容这 xxIE！！)

然后非IE的通过URL.createObjectURL()将Blob(Blob是啥？不知道？没关系，我下面会具体装逼讲解的)构建为一个object URL对象、指定文件名&文件类型、创建a链接模拟点击实现下载，最后通过URL.revokeObjectURL释放创建的对象。

功能虽然实现了，但其实我是似懂非懂的～

紧接着 一个不那么简单的需求

没过几天，产品又给我提了一个需求：图片裁剪上传及预览。

虽然听过类似的需求，但自己手写还真的没写过，然后我就开始了网上冲浪时光(各种搜索，，，)。但这次，没有想象中那么简单了～～

网上看到的都是诸如FileReader、canvas、ArrayBuffer、FormData、Blob这些名词。我彻底懵了，这些平时都只是听过啊，用的也不多啊。经过了一番学习，我发现这些都属于前端二进制的知识范畴，所以在搞业务前，我准备先把涉及到的前端二进制梳理一遍，正所谓：底层基础决定上层建筑嘛