• 前端分片和生成md5方法



     生成md5

    注意:最好限制文件大小,否则时间很长,用户观感很可能不好

    const getMd5FromSliceFile = (file: any) => {
            return new Promise((resolve, reject) => {
                const filePrototype: any = File.prototype;
                let blobSlice = filePrototype.slice || filePrototype.mozSlice || filePrototype.webkitSlice;
                const chunkSize = 2 * Math.pow(1024, 2); // 每片2m
                let chunks = Math.ceil(file.size / chunkSize); // 片数
                let currentChunk = 0;
                const fileReader = new FileReader();
                const spark = new SparkMD5.ArrayBuffer();
                const loadFile = () => {
                    const start = chunkSize * currentChunk;
                    const end = start + chunkSize > file.size ? file.size : start + chunkSize;
                    if (start > file.size - 1) return;
                    const slice = blobSlice.call(file, start, end);
                    fileReader.readAsArrayBuffer(slice);
                }
                loadFile();
                fileReader.onload = (e: any) => {
                    spark.append(e.target.result);
                    currentChunk++;
                    if (currentChunk < chunks) {
                        loadFile()
                    } else {
                        const md5 = spark.end();
                        spark.destroy();
                        console.log('finish loading, getMd5FromSliceFile', md5, file.name, (Date.now() - time1) / 1000 + 's')
                        return resolve(md5);
                    }
                };
                fileReader.onerror = (err: any) => {
                    return reject(err);
                }
            });
        }

    对文件进行切片

    每次切片接口调用前获取该份切片
       

    1. const splitFile = (file: Blob, pieceByte: number, index: number) => {
    2. const chunkSum = Math.ceil(_.get(file, "size") / pieceByte); // 切片总数
    3. const chunkSize = Math.ceil(_.get(file, "size") / chunkSum); // 除以切片总数求得平均每片size多大
    4. const { size, type } = file;
    5. const filePrototype = File.prototype;
    6. let blobSlice = filePrototype.slice || _.get(filePrototype, 'mozSlice') || _.get(filePrototype, 'webkitSlice');
    7. if (size > pieceByte) {
    8. let start = index * chunkSize; // 切片开始位置
    9. let end = start + chunkSize; // 切片结束位置
    10. console.log(start, end, "start---end");
    11. const file1 = _.get(file, "originFileObj");
    12. let item:any = null
    13. try {
    14. item = blobSlice.call(file, start, end, type); // 切割的文件
    15. } catch (error) {
    16. // 如果file没有slice方法, 就从file.originFileObj找
    17. item = blobSlice.call(file1, start, end, type); // 切割的文件
    18. }
    19. return item;
    20. }
    21. return file;
    22. };

  • 相关阅读:
    java基础
    IntelliJ IDEA远程调试:使用IDEA Remote Debug进行高效调试的指南
    用AIGC做私活真的太赚了...
    【VMware vSphere】使用vSphere Lifecycle Manager(vLCM)管理独立主机和集群的生命周期。
    go操作Kfaka
    maven pom文件通过profile配置多环境开发学习
    SpringMVC如何在web.xml中配置DispatcherServlet呢?
    神经网络NN
    C++模板与STL(三):容器与算法
    【Web3 系列开发教程——创建你的第一个 NFT(9)】如何在手机钱包里查看你的 NFT
  • 原文地址:https://blog.csdn.net/qq_42750608/article/details/127611593