前端文件相关操作

一. 文件下载
(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标签承载下载功能
  

二. 文件上传, 预览

• 普通上传
  (1) formData上传 + blob对象预览: 不兼容h5

// 上传
const fd = new FormData();
xxxxxxx
axios({
    url: "xxxxxx",
    method: "post",
    headers: { "Content-Type": "multipart/form-data" },
    data: fd
});
// 使用对象url进行预览， 格式为“blob:http://xxxxx”, 即blob协议url
const url = URL.createObjectURL(data);

(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’

Data Url和Blob Url的区别

1. 前者用于小图片展示，后者用于大图片展示
2. 前者移植性较好，可以在任何浏览器中使用，后者只能在当前应用使用
3. 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标签承载下载功能