视频上传-分片上传那点事

最新推荐文章于 2025-08-13 15:18:03 发布

小九九的爸爸

最新推荐文章于 2025-08-13 15:18:03 发布

阅读量1.8k

点赞数 24

CC 4.0 BY-SA版权

文章标签：音视频前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_45030000/article/details/136013035

本文详细介绍了前端如何通过Blob.slice进行文件分片上传，包括代码示例和按顺序发送分片的方法。同时讨论了后端接收分片并进行合并的过程，以及并发控制和错误处理的要点。

在上一篇文章中，我们讲解了从视频上传到保存在服务端的整个过程，在这个过程中，我们又细分了前端上传视频的几种方式，前端处理视频的几种方式，在前后端通信过程中需要注意的哪些点等等。有不清楚的小伙伴可以看看上篇文章。

紧接上文，我们来讲下文件的分片上传。

我们都知道分片上传是为了提升文件保存的速度。那它是如何实现的呢？下面的流程图会是一个很好的解释：

在这里插入图片描述

接下来，我们一步步的拆解。

前端如何进行分割操作

在上篇文章我们知道，通过 Element.files属性 拿到的是FileList集合。FileList集合由File对象组成。File对象又继承Blob对象。所以File对象可以使用slice方法来完成对文件对象的切割。

slice方法具体明细如下：

含义：Blob.slice() 方法用于创建一个包含源 Blob的指定字节范围内的数据的新 Blob 对象。
返回值：一个新的 Blob 对象，它包含了原始 Blob 对象的某一个段的数据。
参数：3个参数，分别如下：

start。第一个会被拷贝进新的 Blob 的字节的起始位置。
end。这个下标的对应的字节将会是被拷贝进新的Blob 的最后一个字节。
contentType。给新的 Blob 赋予一个新的文档类型。这将会把它的 type 属性设为被传入的值。它的默认值是一个空的字符串。

说了一大堆理论，该是实战了，先说一下思路：

先通过input标签上传文件。
上传文件后，会触发input标签的change事件，在这个事件里，通过event.target.files可以获取到上传的文件对象，并且将它保存在state里。
定义每个文件块的大小，然后使用slice进行分割。

代码如下：

class Video extends React.Component {
   
   
    constructor(props){
   
   
        super(props);
        this.state = {
   
   
            fileObj: {
   
   }
        }
    }
    
    // 分片上传
    uploadChunkFile = async () => {
   
   
        // 定义每块体积大小为20MB
        let chunk_size = 20 * 1024 * 1024;
        // 获取上传的文件对象
        let fileObj = this.state.fileObj;
        // 获取上传的文件对象的体积
        let allSize = this.state.fileObj.size;
        // 获取文件对应的总的分片的数量
        let allChunkCount = Math.ceil(allSize / chunk_size);
        // chunk文件集合
        let chunkArr = [];
        for (let index = 0; index < allChunkCount; index++){
   
   
            let startIndex = index * chunk_size;
            let endIndex = Math.min(startIndex + chunk_size, allSize);
            chunkArr.push({
   
   
                data: fileObj.slice(
                    index * chunk_size,
                    endIndex
                ),
                filename: `chunk-${
     
     index}`,
                chunkIndex: index
            });
        }
    }
    
    // 上传文件触发
    inputChange = async (event) => {
   
   
        let self = this;
        let uploadFileObj = event.target.files[0] || {
   
   };
        this.setState(state => {
   
   
            return {
   
   
                ...state,
                fileObj: uploadFileObj
            }
        });
        return
    }
    
    render(){
   
   
        return <div>
            <button onClick={
   
   this.testConnect}>测试连接</button>
            <input
                type='file'
                onChange={
   
   (event) => this.inputChange(event)}
            />
            <button onClick={
   
   this.uploadChunkFile}>分片上传</button
        </div>
    }
}