关于javascript:前端文件相关操作

一. 文件下载
(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();
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);
<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的区别

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标签承载下载性能