大文件上传+断点续传+秒传

87 阅读2分钟
    // // 文件分片
    // async function sliceFile(file: File, chunkSize: number = 2) {
    //   return new Promise((resolve, reject) => {
    //     // 初始化分片方法
    //     const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
    //     //分片大小
    //     const baseChunkSize = chunkSize * 1024;
    //     // 分片数
    //     const chunkNumber = Math.ceil(file.size / baseChunkSize);
    //     // 当前已执行的分片数
    //     let currentChunkCount = 0;
    //     // 当前已收集的分片
    //     let chunksList = [];
    //     // 创建sparkMd5对象
    //     let spark = new SparkMD5.ArrayBuffer();
    //     // 创建文件读取对象
    //     const fileReader = new FileReader();

    //     let fileHash = null;

    //     fileReader.onload = (e: any) => {
    //       // 读取当前分块结果
    //       const curChunk = e.target.result
    //       // 将当前分块结果加入到spark中
    //       spark.append(curChunk);
    //       currentChunkCount++;
    //       chunksList.push(curChunk);
    //       // 判断分块是否全部读取成功
    //       if (currentChunkCount >= chunkNumber) {
    //         // 全部读取,获取最终的MD5
    //         fileHash = spark.end();
    //         resolve({ chunksList, fileHash });
    //       } else {
    //         loadNext();
    //       }
    //     }

    //     fileReader.onerror = (e) => {
    //       console.log(e);
    //     }

    //     const loadNext = () => {
    //       // 计算分片的起始和终止位置
    //       let start = currentChunkCount * baseChunkSize;
    //       let end = start + baseChunkSize;
    //       if (end > file.size) {
    //         end = file.size;
    //       }
    //       // 读取文件,触发onload
    //       fileReader.readAsArrayBuffer(blobSlice.call(file, start, end));
    //     }
    //     loadNext();
    //   })
    // }

    // // 文件上传
    // const customFileRequest = async (options: any, indexNo?: number) => {
    //   // 拿到file,进行大文件上传
    //   const { file } = options;
    //   // 分片
    //   const { chunksList, fileHash }: any = await sliceFile(file, 2);
    //   // 所有分片ArrayBuffer[]
    //   let allChunksList = chunksList;
    //   // 需要上传的分片序列
    //   let needUploadChunksList = [];
    //   // 上传进度
    //   let progress = 0;

    //   // 1.发送请求,获取文件上传进度
    //   if (true) {
    //     // 发送接口请求,传参fileHash,allChunksList.length,文件后缀名
    //     // 接口返回当前大文件的上传进度和需要上传的分片序列neededFilesList
    //     // if(neededFilesList.length===0){
    //     //  上传完成,实现秒传
    //     // process_cb(100)
    //     // return
    //     // }

    //     // 部分上传成功
    //     // needUploadChunksList = neededFilesList
    //   }

    //   //2.同步上传进度,断点续传情况下
    //   // progress = ((allChunkList.length - neededChunkList.length) / allChunkList.length) * 100;

    //   // 3.文件上传
    //   // if (allChunksList.length > 0) {
    //   //   const requestList = allChunksList.map(async (chunk: any, index: number) => {
    //   //     if (needUploadChunksList.includes(index + 1)) {
    //   //       const formData = new FormData();
    //   //       formData.append('file', chunk);
    //   //       formData.append('index', 'index');
    //   //       formData.append('fileHash', 'fileHash');
    //   //       formData.append('fileAccessType', 'PUBLIC_READ');
    //   //       return postFiles(uploadUrl,formData);
    //   //     }
    //   //   })
    //   // 4.通知后端进行合并
    //   // Promise.all(requestList).then(() => {
    //   //   requestInstance.post(mergeUrl, { fileHash, '.mp4'})
    //   // })
    //   // }





    //   const formData = new FormData();

    //   formData.append('file', file);
    //   formData.append('path', 'screen');
    //   formData.append('tag', 'product_explain');
    //   formData.append('fileAccessType', 'PUBLIC_READ');

    //   if (indexNo || indexNo === 0) {
    //     updateFileState(indexNo, true);
    //   }
    //   postFiles(formData)
    //     .then((res) => {
    //       if (!res || !res.data) {
    //         if (indexNo || indexNo === 0) {
    //           updateFileState(indexNo, false);
    //         }
    //         return;
    //       }

    //       const { id: fileId, fileUrl: fullUrl } = res.data;
    //       const data = {
    //         addList: [
    //           {
    //             liveRoomId,
    //             itemKey,
    //             fileId,
    //             fullUrl,
    //             indexNo,
    //             effectPage: openFrom === OpenFromEnum.CONTENT ? 'context' : 'product', // product表示产品编辑页;context表示直播话术页面
    //             source: 'upload',
    //           },
    //         ],
    //       };
    //       postToAddProductMaterial(liveRoomId, data).then(() => {
    //         if (indexNo || indexNo === 0) {
    //           updateFileState(indexNo, false);
    //         }
    //         getAllMaterials();
    //       });
    //     })
    //     .catch(() => {
    //       if (indexNo || indexNo === 0) {
    //         updateFileState(indexNo, false);
    //       }
    //     });

    //   return false;
    // };Ï