js 大文件上传 三种切片方式

1,732 阅读1分钟

视频上传太大?莫慌切片上传帮助你

首先说说切片方式

方式一 => web-worker web-worker+md5切片.png

async calculateHash(chunks){
    return new Promise(resolve => {
        // 防止主线程卡顿
        this.container.workder = new Worker("/hash.js");
        this.container.workder.postMessage({ chunks });
        // 完成计算回调
        this.container.workder.onmessage = e => {
            const { progress, hash } = e.data;
            this.hashProgress = Number(progress.toFixed(2));
            if (hash) resolve(hash);
        };
    })
}
// web-worker
that.importScripts('spark-md5.min.js')
that.onmessage = e => {
    //  接受主线程通知 每次一块
    const { chunks } = e.data
    const spark = new that.SparkMD5.ArrayBuffer()
    let progress = 0
    let count = 0
    const loadNext = index => {
        const reader = new FileReader()
        reader.readAsArrayBuffer(chunks[index].file)
        reader.onload = e => {
            // 累加器
            count++
            // 增量计算md5
            spark.append(e.target.Result)
            if (count === chunks.length) {
                // 通知主线程,计算结束
                that.postMessage({
                    progress: 100,
                    hash: spark.end()
                })
            } else {
                // 每块结束计算,通知修改进度
                progress += 100 / chunks.Length
                that.postMessage({
                    progress
                })
                // 计算下一块
                loadNext(count)
            }
        }
    }
}
// 启动
loadNext(0)

方式二 =>

WeChat9ca4b3d39c020023c3eff452c49b3ff5.png

方式三 => 抽样哈希 未完待续