美文网首页
前端大文件上传切片操作

前端大文件上传切片操作

作者: 我有一条小黑狗 | 来源:发表于2023-11-01 10:44 被阅读0次

/**

  * 文件切片

  * @param {File} file 切片文件

  * @param {number} pieceSize 切片大小

  * @param {string} fileKey 文件唯一标识

  */

const getSliceFile = async (file: File, pieceSizes = 50, fileKey: string) => {

  const piece = 1024 * 1024 * pieceSizes;

  // 文件总大小

  const totalSize = file.size;

  const fileName = file.name;

  // 每次上传的开始字节

  let start = 0;

  let index = 1;

  // 每次上传的结尾字节

  let end = start + piece;

  const chunks = [];

  while (start < totalSize) {

    const current = Math.min(end, totalSize);

    // 根据长度截取每次需要上传的数据

    // File对象继承自Blob对象,因此包含slice方法

    const blob = file.slice(start, current);

    //  可以利用spark-md5这个插件生成一个固定的hash值

    const hash = ''

    // 特殊处理,对接阿里云大文件上传

    chunks.push({

      file: blob,

      size: totalSize,

      index,

      fileSizeInByte: totalSize,

      name: fileName,

      fileName,

      hash,

      sliceSizeInByte: blob.size,

      fileKey,

    });

    start = current;

    end = start + piece;

    index += 1;

  }

  return chunks;

};

相关文章

网友评论

      本文标题:前端大文件上传切片操作

      本文链接:https://www.haomeiwen.com/subject/ewowidtx.html