前端大文件上传

77 阅读1分钟

//将我们的文件来进行切片,切片完之后就将我们的文件数组进行分片上传,分片上传的时候需要跟后台配合, //利用md5给我们的文件切片来进行一个hash认证,避免已经上传过的文件再次上传

WechatIMG162.jpeg

WechatIMG163.jpeg

WechatIMG164.jpeg

function slice(file, piece = 1024 * 1024 * 5) {
   let totalSize = file.size; // 文件总大小
   let start = 0; // 每次上传的开始字节
   let end = start + piece; // 每次上传的结尾字节
   let chunks = []
   while (start < totalSize) {
     // 根据长度截取每次需要上传的数据
     // File对象继承自Blob对象,因此包含slice方法
     let blob = file.slice(start, end); 
     chunks.push(blob)
     start = end;
     end = start + piece;
   }
   return chunks
 }

切完片准备上传

 let file =  document.querySelector("[name=file]").files[0];

const LENGTH = 1024 * 1024 * 0.1;
let chunks = slice(file, LENGTH); // 首先拆分切片

chunks.forEach(chunk=>{
  let fd = new FormData();
  fd.append("file", chunk);
  post('/mkblk.php', fd)
})

上传完成功之后会拿到每一次切片成功之后后台返的docid,最后拿到所有的docid再请求一次后台