文件的拆分与合并

最新推荐文章于 2024-07-31 14:35:30 发布

智芝星

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量1.2k

点赞数

分类专栏：深挖html 深挖css 深挖js 文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_45750263/article/details/127986119

版权

深挖js 同时被 3 个专栏收录

5 篇文章 0 订阅

订阅专栏

深挖css

3 篇文章 0 订阅

订阅专栏

深挖html

2 篇文章 0 订阅

订阅专栏

文件拆分与合并的目的

这个技术的主要应用场景在文件的传输上，当要传输的文件比较大的时候，普通的大文件传输需要耗费很大的时间，且传输失败就需要所有重新传输。那如果把要传输的大文件进行切分，切分成多块，分块进行传输，这可以保证传输失败的时候，只要重传失败的那一部分块级文件就行，并且可以控制传输速度。例如当你上传文件的时候，可以通过分块上传的技术来控制停止还是继续上传之后的块级文件，下载也亦是如此。

文件拆分

实现文件拆分其实很简单，File对象上有一个slice方法，可以对文件进行切割拆分，这个方法有两个参数，第一个参数是需要拆分的开始的位置，第二个是结束的位置，返回的是一个Blob二进制对象。
以下是实现文件拆分的方法，详细步骤解释看注解

    function split(){
        // selectFile是封装好的一个选择文件的方法，参数false表示文件不可多选
        selectFile(false).then(({files})=>{
            // 返回的files是选择的文件数组
            let file=files[0];
            // 每一块的大小，这里定为10MB
            let singleSize=1024*1024*10;
            let arr=[];
            // 下面开始切分，实际应用情况会在切分的过程中进行文件的传输，这里为了观察到为文件分块情况，将切分好的块push进入arr中，然后进行下载导出。
            for(let i=0;i<file.size;i+=singleSize){
                let end=i+singleSize>file.size?file.size:i+singleSize;
                arr.push(file.slice(i,end));
            }
            downloadFiles(arr,file.name);
        })
    }

文件合并

文件合并就是读取之前分割好的二进制对象，以数组的形式按顺序拼接在一起，然后通过File对象构造出对应完整的file对象。以下是实现代码：

    function merge(){
        selectFile(true).then(({files})=>{
            let arr=[...files].map(file=>file.slice(0,file.size));
            let name=files[0].name.replace(/-\d+$/,'');
            let file=new File(arr,name);
            downloadFile(file,file.name);
        })
    }

文件下载

这一部分我先前有出过一期文件下载的文章，里面有前端下载文件的多种方法，这里就不多解释了，选择的是通过脚本构建a标签来进行下载

    function downloadFile(file,name){
        let a=document.createElement('a');
        a.setAttribute('download',name);
        a.href=URL.createObjectURL(file);
        a.click();
    }

文件选择

文件选择通过input标签，将type改为file就可以实现文件选择，通常情况下不会选择原生自带的input进行页面布局，因为外观不是很好看，所以使用时，一般是自己写按钮，点击按钮后，脚本1生成filel类型的input的标签，触发点击事件，触发文件选择功能。

    function selectFile(isMultiple=false){
        return new Promise((resolve,reject)=>{
            let input=document.createElement('input');
            input.setAttribute('type','file');
            isMultiple&&input.setAttribute('multiple','multiple');
            input.addEventListener('change',(e)=>{
                resolve(input);
            })
            input.click();
        })
    }

完整代码和展示效果，同学们可以复制粘贴运行一下，看看效果，有助于理解。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            color: white;
            background-color: #3498db;
            border: none;
            padding: 10px 25px;
            box-shadow: 0 0 8px #2980b9;
            border-radius: 7px;
            display: block;
            margin: 20px auto;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <button onclick="split()">分解文件</button>
    <button onclick="merge()">合并文件</button>
</body>
</html>
<script>
    function split(){
        // selectFile是封装好的一个选择文件的方法，参数false表示文件不可多选
        selectFile(false).then(({files})=>{
            // 返回的files是选择的文件数组
            let file=files[0];
            // 每一块的大小，这里定为10MB
            let singleSize=1024*1024*10;
            let arr=[];
            // 下面开始切分，实际应用情况会在切分的过程中进行文件的传输，这里为了观察到为文件分块情况，将切分好的块push进入arr中，然后进行下载导出。
            for(let i=0;i<file.size;i+=singleSize){
                let end=i+singleSize>file.size?file.size:i+singleSize;
                arr.push(file.slice(i,end));
            }
            downloadFiles(arr,file.name);
        })
    }
    function merge(){
        selectFile(true).then(({files})=>{
            let arr=[...files].map(file=>file.slice(0,file.size));
            let name=files[0].name.replace(/-\d+$/,'');
            let file=new File(arr,name);
            downloadFile(file,file.name);
        })
    }
    function selectFile(isMultiple=false){
        return new Promise((resolve,reject)=>{
            let input=document.createElement('input');
            input.setAttribute('type','file');
            isMultiple&&input.setAttribute('multiple','multiple');
            input.addEventListener('change',(e)=>{
                resolve(input);
            })
            input.click();
        })
    }
    function downloadFiles(files,name){
        files.forEach((file,index)=>{
            downloadFile(file,`${name}-${index}`)
        })
    }
    function downloadFile(file,name){
        let a=document.createElement('a');
        a.setAttribute('download',name);
        a.href=URL.createObjectURL(file);
        a.click();
    }
</script>

展示页面

智芝星

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
文件的拆分与合并

这个技术的主要应用场景在文件的传输上，当要传输的文件比较大的时候，普通的大文件传输需要耗费很大的时间，且传输失败就需要所有重新传输。那如果把要传输的大文件进行切分，切分成多块，分块进行传输，这可以保证传输失败的时候，只要重传失败的那一部分块级文件就行，并且可以控制传输速度。例如当你上传文件的时候，可以通过分块上传的技术来控制停止还是继续上传之后的块级文件，下载也亦是如此。
复制链接

扫一扫

专栏目录