一. 文件下载
(1) blob流下载（二进制数据流下载）
- 模板文件下载: 以vue我的项目为例，模板文件搁置public目录下，
// 以blob对象接管axios({ url: 'xxxxx', // URL, 依据理论状况来 , 个别为‘利用包部署的baseUrl(即publicPath) + 模板文件门路’ method: "get", responseType: "blob"})// 应用a标签承载下载性能const blob = new Blob([data], { type: 'xxxxx' });if (window.navigator.msSaveOrOpenBlob) { navigator.msSaveBlob(data, filename);} else { const href = URL.createObjectURL(data); // 创立新的URL示意指定的blob对象 const a = document.createElement('a'); // 创立a标签 a.style.display = 'none'; a.href = href; // 指定下载链接 a.download = filename; // 指定下载文件名 a.click(); // 触发下载 URL.revokeObjectURL(a.href); // 开释URL对象, 避免内存透露}- 一般文件下载:
文件上传到文件服务器端（便于性能优化，有时会做定期清理操作），以uuid作为标识，依据接口获取文件存储门路（该url即示意一个blob对象）， 应用a标签承载下载性能<a :download="name" :href="url">
二. 文件上传, 预览
- 一般上传
(1) formData上传 + blob对象预览: 不兼容h5
// 上传const fd = new FormData();xxxxxxxaxios({ url: "xxxxxx", method: "post", headers: { "Content-Type": "multipart/form-data" }, data: fd});// 应用对象url进行预览， 格局为“blob:http://xxxxx”, 即blob协定urlconst url = URL.createObjectURL(data);<a :download="name" :href="url">(2) base64上传 + Data Url预览: 应用filReader+readAsDataURL,兼容h5
// 上传let fr = new FileReader();fr.onload = function (e) { that.imgBaseSrc = e.target.result; //上传后盾 xxxxxx};fr.readAsDataURL(file.files[0]); // 个别图片应用Data Url模式读取（fr.readAsDataURL）, 文件应用二进制数据流模式读取(fr.readAsBinaryString)// 预览, Web性能优化有一项措施：把小图片用base64编码间接嵌入到HTML文件中，理论就是利用// 了Data URL来获取图片数据src格局为：‘data:image/jpeg:base64,xxxxxx’<img :src="imgBaseSrc">Data Url和Blob Url的区别
- 前者用于小图片展现，后者用于大图片展现
- 前者移植性较好，能够在任何浏览器中应用，后者只能在以后利用应用
- Blob URL能够不便的应用xhr对象获取源数据
文件超大上传问题
- 切片上传联合断点续传
外围点：切片上传、断点续传、进度管控
外围思路：将file对象进行等分切割（file.slice继承自blob对象）, 分段进行上传操作，
上传过程中进行进度管控，具体代码参考: js治理大文件上传及断点续传解析
留神：个别理论开发过程中服务端会限度上传的文件大小（例如20M）, 前端再上传之前会进行压缩、加水印等操作
三. 数据批量导入
以导入excel数据为例
外围思路：以二进制数据流模式读取，将二进制文件流解析为xlsx对象，读取excel工作表数据转化为json数据
应用技术点：XLSX, readAsBinaryString, FileReader
let fr = new FileReader();fr.onload = function (e) { const data = e.target.result; const wb = XLSX.read(data, { type: 'binary' }); // 读取工作表数据转化为json数据 xxxxxx};fr.readAsBinaryString(file.files[0]);四. 数据批量导出
相似文件下载性能：1. blob流下载（二进制数据流下载）; 2. 应用a标签承载下载性能