前端分片和生成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);
            }
        });
    }

对文件进行切片

每次切片接口调用前获取该份切片
    const splitFile = (file: any, pieceByte: number, index: number) => {
        const { size, type } = file;
        if (size > pieceByte) {
            let start = index; // 切片开始位置
            let end = (start + pieceByte) < size ? (index + pieceByte) : size; // 切片结束位置
            let item: any = file.slice(start, end, type); // 切割的文件
            return item
        }
        return file;
    };

你可能感兴趣的:(JavaScript面试问题,文件下载或者文件上传,react.js,文件上传)