前端实现大文件/图片的上传 -采用分片上传的形式

需求：当需要上传的文件或图片的较大时，采用分片截取分段的形式上传；
要想实现文件的上传与下载，先得了解下new Blob()对象；
文件上传的对象是blob对象，即二进制大对象;可用于实现文件流的下载

一.new Blob()

1. 使用a标签中的download的属性进行文件的下载

<p>blob对象； --- 文件的下载/图片的预览</p>
<a download >a标签的download是同源即可下载 </a>
<br>
<a href="" id="btn">下载的a标签</a>

点击添加属性的形式，进行下载；

// 俩个参数，第一个是数组
const str = `
  <div>feeee</div>
`;
const blob = new Blob([str], {
    type: 'text/html'
});
console.log(blob.text()); // 可获取blob的值
// 点击下载a标签
btn.onclick = function(e) {
  this.setAttribute('download', '123.html');
  // 将blob转换成url地址可供href使用
  this.href = URL.createObjectURL(blob); 
}

2. input的形式添加文件或图片的形式下载；

<p>input选择文件的下载</p>
<input type="file" id="input" />

进行create<a>标签的形式进行，添加url的值进行下载；

input.onchange = function(e) {
  const file = e.target.files[0]; // 继承在load的对象
  console.log(file, "---file");
  // 创建一个a的标签进行下载
  const a = document.createElement('a');
  a.setAttribute('download', 'mybaidu.html');
  a.href = URL.createObjectURL(file);
  a.click();
}

借助于fileReader的形式，进行异步的下载使用：

// 创建下载的图片; 同步的方式进行
// const img = new Image();
// img.src = URL.createObjectURL(file);

const img = new Image();
const fileRead = new FileReader();
fileRead.onload = function() {
  img.src = fileRead.result;
}
fileRead.readAsDataURL(file);
document.body.appendChild(img);

二.实现切片上传的形式

当文件/图片很大时，进行文件的切片递归上传访问：

<p>实现切片上传</p>
<input type="file" id="inputUplad">
<button id="uploadBtn">切片上传</button>

js的实现：

// 切片上传
let chunkSize = 1024 * 10;
let index = 0;
const inputUplad = document.getElementById('inputUplad');
$('#uploadBtn').click(upload);
function upload() {
    const file = inputUplad.files[0]; // 获取到的上传文件
    if(!file) return;
    const [filename, ext] = file.name.split('.'); // 将文件的名称，后缀解构出来
    let start = index * chunkSize; // 切片的起始位置
    console.log(file.size, start,"file.size")
    if(start > file.size) return; // 大于文件的大小时进行return跳出递归
    //   切片的blob的文件；
    const blob = file.slice(start, start * chunkSize);
    const blobName = `${filename}${index}.${ext}`;
    // 将blob的文件转换为file的文件；
    const blobFile = new File([blob], blobName);
    // 上传用到的formData的格式
    const formData = new FormData();
    formData.append('file', blobFile);
    formData.append('filqe', 22);
    // 上传文件
    fetch('/upload', {
        method: 'post',
        body: formData
    }).then((res) => {
        index++;
        console.log(res)
        upload(); // 进行递归的上传文件处理
    });
}