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

小九九的爸爸2023-11-26 21:48

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

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

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

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

前端如何进行分割操作

在上篇文章我们知道，通过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进行分割。

代码如下：

jsx 复制代码 
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>
    }
}

当我们上传一个66M的视频时，我们会发现，总的分片数量是4。符合预期。

发送chunk的几种方式

这块无非就2种，分别如下：

  • 将这些分片按照顺序发送给后端。
  • 将这些分片并发的方式发送给后端。这种方式下，需要考虑浏览器一次只能并发6个请求的情况，并且这种方式也是面试中高频考点（如何控制并发）。

在这个功能点里，我们采用按顺序的方式上传分片，因为这种方式是最直观的，会了这种方式，相信分片上传你就完全会了。

但是在实际的项目中，更多的还是并发的场景（我们下篇文章再讲）。

按照顺序发送

这个就是第一个请求成功后，再去发送第二个请求，以此类推...

它也是面试中的一个常考点：如何按照顺序发送请求？ 如何实现红绿灯效果？等等。

按顺序发送，2种思路，一种是循环，一种是递归。

递归这里不用说，重点讲一下循环。

普通的for循环可以做到吗？

答案是可以的。

javascript 复制代码 
let arr = [
    {name: 1},
    {name: 2},
    {name: 3},
    {name: 4},
    {name: 5}
];

async function ax(){
    for (let index = 0; index < arr.length; index++){
        let result = await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(arr[index].name);
            }, 1000);
        });
        console.log('result:', result);
    }
}

ax();

for...in... 能做到吗？

答案也是可以的。

javascript 复制代码 
let arr = [
    {name: 1},
    {name: 2},
    {name: 3},
    {name: 4},
    {name: 5}
];

async function ax(){
    for (let index in arr){
        let result = await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(arr[index].name);
            }, 1000);
        });
        console.log('result:', result);
    }

}

ax();

for...of...能做到吗？

答案也是可以的。

javascript 复制代码 
let arr = [
    {name: 1},
    {name: 2},
    {name: 3},
    {name: 4},
    {name: 5}
];

async function ax(){
    for (let index of arr){
        let result = await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(index.name);
            }, 1000);
        });
        console.log('result:', result);
    }

}

ax();

forEach可以做到吗？

不行，绝对不行。

javascript 复制代码 
let arr = [
    {name: 1},
    {name: 2},
    {name: 3},
    {name: 4},
    {name: 5}
];

async function ax(){
    arr.forEach(async item => {
        let result = await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(item.name);
            }, 1000);
        });
        console.log('result:', result);
    });
}

ax();

MDN上也是这么说的，但是你要问具体原因，那就只能看forEach源码了。我感觉啊，forEach应该是个while循环实现的，外层的函数是个同步函数，所以导致forEach不能按照顺序发送Promise请求。

forEach伪代码如下：

javascript 复制代码 
Array.prototype.myForEach = function (cb){
    let originArr = this;
    let index = 0;
    while(index < originArr.length){
        cb(originArr[index], index);
    }
}

/**
    即使cb内部是异步操作，但是cb外面的调用方不是异步的，所以导致这种写法并不能按顺序发送Promise请求。
*/

while循环可以做到吗？

答案是可以的。

javascript 复制代码 
let arr = [
    {name: 1},
    {name: 2},
    {name: 3},
    {name: 4},
    {name: 5}
];

async function ax(){
    let index = 0;
    while(index < arr.length){
        let result = await new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve(arr[index].name);
            }, 1000);
        });
        index++;
        console.log('result:', result);
    }

}

ax();

数组里哪些方法能做到？

这个就要看数组方法的源码了，但是分析过程跟forEach一样，这里就不一一例举了。

代码实践

在上面的分割章节里，我们讲解了File对象的分割，我们继续在原方法里进行改造，从而添加按顺序发送chunk块的需求。

javascript 复制代码 
// 分片上传请求
uploadChunkReq = async (fileBlob, chunkIndex, type) => {
    let formData = new FormData();

    let result = await axiosInstance.post(
        '/video/uploadChunk',
        {
            chunkIndex,
            type,
            videoDict: fileBlob,
        },
        {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }
    );
    return result;
}


// 分片上传动作
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
        });
    }
    
    // 按顺序发送chunk分片
    for (let item of chunkArr){
        let result = await this.uploadChunkReq(item.data, item.chunkIndex, 'chunk');
        console.log('分片上传的结果:', result);
    }
}

后端如何合并chunk

主要是3件事，

首先要新增一个接口，用来保存分片数据；

其次当所有的分片都保存成功了，应该去合并分片最终形成文件；合并chunk的时机可以是后端自己判断，也可以是前端触发，具体要看场景。

最后，删除分片数据。

单独保存chunk

这里我们需要改造原有的方法，看过上一篇的小伙伴都知道，如果express是通过multer第三方库来解析的form-data数据，那它就一定会经过multer里定义的中间件，我们要在这里去将不同类型的文件存放到不同的文件夹里。

node 复制代码 
// 定义chunk的临时存放路径
var tempChunkPosition = multer({
  // dest: 'tempChunk'
  storage: multer.diskStorage({
    destination: function (req, file, cb) {
      if (req.body.type == 'chunk'){
        // 说明是分片上传
        cb(null, path.join(__dirname, '../tempChunk'));
      } else {
        // 说明上传的是小文件
        cb(null, path.join(__dirname, '../videoDest'));
      }
    },
    filename: function (req, file, cb) {
      if (req.body.type == 'chunk'){
        // 如果是分片上传
        cb(null, file.fieldname + '-' + `${req.body.chunkIndex}` + '-' + Date.now());
      } else {
        // 说明上传的是小文件
        cb(null, file.fieldname + '-' + Date.now() + '.mp4');
      }
    }
  })
});

/ 上传切片
router.post('/uploadChunk', tempChunkPosition.single("videoDict"),(req, res, next) => {

  return res.send({
    success: true,
    msg: '上传成功'
  });
});

合并chunk

这一步就是将临时的分片数据全都读取出来，然后依次将他们写入到文件中。

因为我们在上传分片的过程中，已经将分片的标识索引传给了后端，所以后端无需再对读出来的chunk集合进行顺序排序。

node 复制代码 
router.post('/mergeChunk',(req, res, next) => {

  // 获取文件切片的路径
  let chunkPath = path.join(__dirname, '../tempChunk');

  // 开始读取切片
  const chunkArr = fs.readdirSync(chunkPath);

  chunkArr.forEach(file => {
    fs.appendFileSync(
      path.join(__dirname, `../videoDest/${req.body.originFileName}.mp4`),
      fs.readFileSync(`${chunkPath}/${file}`)
    );
  });
 
  return res.send({
    success: true,
    msg: '文件合并成功'
  });
});

此时我们再对前端的上传分片的函数进行改造，主要就是新增 "合并分片"的动作触发。

jsx 复制代码 
// 合并分片请求
mergeChunk = async () => {
    let result = await axiosInstance.post(
        '/video/mergeChunk',
        {
            originFileName: '11'
        },
        {
            headers: {
                'Content-Type': 'application/json'
            }
        }
    );
    return result;
}

//分片上传
uploadChunkFile = async () => {
    // 前面的都不变......
    for (let item of chunkArr){
        let result = await this.uploadChunkReq(item.data, item.chunkIndex, 'chunk');
        console.log('分片上传的结果:', result);
    }
    // 前面的都不变......

    // 合并请求(新增的++++++++++++++)
    this.mergeChunk();
}

到这一步，我们的分片上传的流程就已经全部打通了，此时大家上传文件后，就会看到后端的目录里不仅有分片数据，而且还有完整的视频文件。

敬请期待

我们这次讲解了文件的分片上传，但是整体跑下来你会发现，有点太顺风顺水，没有包含错误机制，所以下篇文章，我们不仅会将如何并发控制分片的上传，还会有上传过程中的错误控制。

最后

好啦，本篇文章到这里就结束啦，如果上述过程中有错误的地方，欢迎各位大神指出。希望我的文章对你有帮助，我们下期再见啦～～

相关推荐
laocooon52385788627 分钟前
HTML CSS 超链
前端·css·html
LUwantAC29 分钟前
CSS（二）：美化网页元素
前端·css
素**颜40 分钟前
uniapp 基于xgplayer（西瓜视频） + renderjs开发，实现APP视频播放
javascript·uni-app·音视频
m0_7482510841 分钟前
docker安装nginx，docker部署vue前端，以及docker部署java的jar部署
java·前端·docker
我是ed1 小时前
# thingjs 基础案例整理
前端
Ashore_1 小时前
从简单封装到数据响应：Vue如何引领开发新模式❓❗️
前端·vue.js
落魄实习生1 小时前
小米路由器开启SSH，配置阿里云ddns，开启外网访问SSH和WEB管理界面
前端·阿里云·ssh
bug丸1 小时前
v8引擎垃圾回收
前端·javascript·垃圾回收
安全小王子1 小时前
攻防世界web第三题file_include
前端
&活在当下&1 小时前
ref 和 reactive 的用法和区别
前端·javascript·vue.js
热门推荐
01大模型国产化适配7-华为昇腾LLM落地可选解决方案（MindFormers、ModelLink、MindIE）02Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO03玄机平台应急响应—webshell查杀04电赛2024年H题智能小车基于MSPM0G3507主控MCU（利用8路灰度加上MPU6050的解决方式）具体项目报告05组基轨迹建模 GBTM的介绍与实现（Stata 或 R）06支付宝短视频平台创作分成激励项目07【数学建模】建筑工地开工问题08【一文读懂】NTN（非地面网络）技术介绍09优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间10怎么找小红书美食探店博主合作？