大文件上传

177 阅读1分钟

1.文件处理

  • 切片 文件处理第一步是吧文件切割成一个一个小文件流,可以按照固定大小分割或者百分比的方式都可以,然后将切片放到一个数组对象里面
  • 注意点:
    • 1.切片单位100kb || or
    • 2.切片身份
    • 3.切片索引值index
    • 4.根据长度截取每次需要的上传的数据流文件
    • file对象继承blob对象,因此包含slice方法
const slice = (file, piece)=>{
  let totalSize = file.size;
  let start = 0;
  let end = start + piece
  let chunks = []
  while (start < totalSize){
    let blob = file.slice(start, end)
    chunks.push(blob)
    start = end 
    end = start + piece
  }
  return chunks;
}

let file = document.querySelect('.file').files[0];
const length = 1024 * 1024 * 1;
let chunks = slice(file,length)

2.分片发送&&通知ending

这里没有做节流处置,因为是示例 定义数组把分片的每一个数据流包装成http request,这样通过promise.all来异步批量请求

let tasks = [];
chunks.forEach((chunk,index)=>{
    let formData = new FormData();
    formData.append("file", chunk)
    formData.append("context",file.name)
    formData.append("chunk", index+1)
    tasks.push(post('/api/upload', formData))
});
Promise.all(task).then((res)=>{
    let formData = new FormData();
    formData.append("context", context)
    formData.append("chunks",chunks.length)
    post('/api/uploadChunks', formData);
})