前端大文件如何切片上传---简易版_前端小程序文件上传超过10m做切片-优快云博客

本文链接：https://blog.youkuaiyun.com/impossible1994727/article/details/143949638

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" name="" id="fileInput">
    <button onclick="uploadFile()">upload</button>
</body>
<script>
    const chunk_size=5*1024*1024;//每块大小为5m
    function uploadFile(){
        const file=document.getElementById('fileInput').files[0];
        if(!file){
            console.log('还没有选择文件')
            return;
        }
        const total_chunks=Math.ceil(file.size/chunk_size);
        let current_chunk_index=0;
        function uploadChunk(){
            if(current_chunk_index>=total_chunks){
                console.log('上传完成了');
                return
            }
            const start=current_chunk_index*chunk_size;
            const end=Math.min(start+chunk_size,file.size);
            const chunk=file.slice(start,end);
            const fordata=new FormData();
            fordata.append('file',chunk);
            fordata.append('chunkNumber',current_chunk_index+1);
            fordata.append('totalChunks',total_chunks);
            fetch('url',{
                method:"POST",
                body:fordata
            }).then(res=>{
                if(res.ok){
                    current_chunk_index++;
                    uploadChunk()
                }
            }).catch(e=>{
                console.log('上传出错')
            })

        }
        uploadChunk();
    }
</script>
<script>

    /*
常见问题：
1、网络断开，之前上传的没了
2、传着传着，网络波动，啥都没了
3、关机想接着传，做不到
*/


/**
 * 专业术语：
 * -断点续传
 * -断开重连重传
 * -切片上传
 */

/**
 * 方案
 * -前端切片
 * -将切片传递给后端
 * -后端组合切片
 */


/**
 * web-worker多线程切片，处理完成交给主线程发送
 * 
 */
</script>
</html>