Vue中实现视频的分片上传

最新推荐文章于 2024-07-25 10:38:10 发布

只如初见0706

最新推荐文章于 2024-07-25 10:38:10 发布

阅读量1.2w

点赞数 8

分类专栏： vue 文章标签：分片上传 MD5

本文链接：https://blog.csdn.net/zrcj0706/article/details/103137617

版权

本文介绍了在Vue中实现视频的分片上传流程，包括选择本地视频、触发上传方法、详细解析分片上传方法（uploadByPieces）以及相关辅助方法如readFileMD5和readChunkMD5。通过获取视频MD5值进行文件校验，分片上传并最终合并，确保视频上传的高效和完整性。

摘要由CSDN通过智能技术生成

1、选择本地视频，获取视频实体

第一步：:auto-upload="false"；:on-change="videoSaveToUrl"

 <el-upload
          drag
          action
          :auto-upload="false"
          :on-change="videoSaveToUrl"
          :accept="'video/*'"
        >
 </el-upload>

第二步：在videoSaveToUrl方法中获取视频实体，并存放在data数据的this.video中

 videoSaveToUrl(event) {
      this.video = event.raw;
    },

2、单击“上传”按钮，触发分片上传方法

import { uploadByPieces } from "./JS/utils";  //引入uploadByPieces方法
processButtonClick() {
      uploadByPieces({
        file: this.video,//视频实体
        pieceSize: 5, //分片大小
        success: data => {
          console.log("分片上传视频成功");
        },
        error: e => {
          console.log("分片上传视频失败");
        }
      });
    }

3、分片上传方法(utils.js代码中的uploadByPieces方法)

第一步：获取分片上传过程中会使用到的变量

 // 上传过程中用到的变量
  let fileMD5 = ''// 总文件列表
  const chunkSize = pieceSize * 1024 * 1024 // 5MB一片
  const chunkCount = Math.ceil(file.size / chunkSize) // 总片数
  readFileMD5() // 开始执行代码

第二步：readFileMD5方法：首先获取文件的MD5值，并通过网络请求uploadCheckAxios来检查是否之前已上传过该视频（每个文件的MD5值是唯一的），如果已经上传过，则后台直接返回视频在服务器上的URL，如果没有上传则进行分片上传，调用readChunkMD5() 方法