原生js实现大文件切片上传

原生js实现大文件切片上传

/* 
	实现文件切片处理【固定数量 & 固定大小】
	file原型对象中有silce方法可以实现切片 
	大文件切片上传实现的思路：
		1、调用已经上传切片接口，获取到已上传成功切片
		2、上传切片，将已经上传切片不在进行上传
		3、当所有切片都上传成功了，向后端发送切片合并请求，将上传的切片进行合并
*/
const handle = () => {
    let max = 1024 * 100;
    let count = Math.ceil(file.size / max);
    let index = 0;
    let chunks = [];
    if (count > 100) {
        max = file.size / 100;
        count = 100;
    }
    while (index < count) {
        chunks.push({
            file: file.slice(index * max, (index + 1) * max),
            filename: `${HASH}_${index + 1}.${suffix}`,
        });
        index++;
    }

    index = 0;
    const finalled = () => {
        index ++;
        if(index < count) return;
        // 当所有切片上传成功，调用后端合并切片的请求，进行切片合并操作
    }

    chunks.forEach(chunk => {
        /* 	
		已经上传的无需在上传 		
		already中存在的是：通过请求接口，获取已经上传的文件信息 
		*/
        if(already.length > 0 && already.includes(chunk.filename)){
            finalled();
            return;
        }
        let fm = new FormData();
        fm.append('file', chunk.file);
        fm.append('filename', chunk.filename);
        instance.post('/upload_chunk', fm).then(data => {
            /* 当上传成功的时候，则进行一次上传成功记录 */
            if(data.code === 0){
                finalled();
                return;
            }
            return Promise.reject(data.codeText);
        }).catch(() => {
            // 当上传失败的时候，错误处理
        })
    })
};

原文地址：https://www.jb51.cc/wenti/3282766.html