文件切片分流上传

关注

原创 2025-10-15 15:49:22 231 阅读 AI 写同款· GEO 优化 ›

大文件上传：秒传、断点续传、分片上传前言文件上传是一个老生常谈的话题了，在文件相对比较小的情况下，可以直接把文件转化为字节流上传到服务器，但在文件比较大的情况下，用普通的方式进行上传，这可不是一个好的办法，毕竟很少有人会忍受，当文件上传到一半中断后，继续上传却只能重头开始上传，这种让人不爽的体验。那有没有比较好的上传体验呢，答案有的，就是下边要介绍的几种上传方式详细教程秒传 1、什么是秒传通俗的说，你把要上传的东西上传，服务器会先做MD5校验，如果服务器上有一样的东西，它就直接给你个新地址，其实你下载的都是服务器上的同一个文件，想要不阅读详情

在这里插入图片描述

	<input class="tfileHidden pointer" type="file" @change="handUploadFile">

  async handUploadFile(event) {
    const targetFile = event.target.files[0];
    const chunkSize = 1 * 1024 * 1024;
    const totalChunks = Math.ceil(targetFile.size / chunkSize);
    const promisesArr = [];
    for (let i = 0; i < totalChunks; i++) {
      const start = i * chunkSize;
      const end = Math.min(start + chunkSize, targetFile.size);
      const chunk = targetFile.slice(start, end);
      const formData = new FormData();
      formData.append('formData', chunk);
      const parr = await new Promise((resolve,reject) => {
      	// 定时器模拟数据上传
        setTimeout(() => {
          if(Math.random() > 0.03) {
            resolve(i);
          } else {
            reject(i);
            console.log("reject["+i+"]:", start, end);
          }
        }, 1000);
			// 数据接口上传
			// axiosAPI.uploadFile(formData,{}).then(e => resolve(e)).catch(e => reject(e));
			// console.log("X-Chunk-Start: ", start);
			// console.log("X-Chunk-End: ", end);
      });
      promisesArr.push(parr);
    }    
    Promise.all(promisesArr).then(all => {
      console.log("文件全部上传完成: ",all);
    }).catch(error => { });
  }