前端视频分片上传（blob）vue

ゝ一纸荒年。 2022-09-08 00:07 329阅读 0赞

# 前言 #

开发过程中我们难免会遇到上传视频的需求。如果视频过大或者后端需要将前端上传的视频切割为播放更友好的m8u3格式，我们的分段上传视频就显得尤为重要

--------------------

# 一、注意事项 #

下面的代码基于vue2.0框架使用混入的方法进行调用。需要注意的是如果你的项目使用了ESlint需要关闭while (true) 循环条件永恒进入的校验 or 用自己方法编写也是可以的

# 二、使用步骤 #

## 1.组件代码 ##

/* 使用示例 使用时更改自己的接口地址 使用到依赖axios import upviedo from './upvideo.js' mixins:[upviedo], methods: { preview(file) { this.num++ if(this.num>=2)return this.uploadViedo(上传文件对象,分片允许最大M（Num）).then(res=>{ console.log('总体完成') }).catch(err=>{ console.log('总体失败') }) }, } this.Loading 变量当前上传进度 */
     
    
    export default { 
      data() { 
        return { 
          NowTotal:0,//当前
          AllTotal:1,//总数
          Loading:0,//当前进度% 
          clearT:0,//清除定时器
        };
      },
      mounted(){ 
        // 检测断网
        window.addEventListener("offline", () => { 
          console.log("已断网");
        });
        window.addEventListener("online", () => { 
          console.log("网络已连接");
        });
      },
      methods: { 
        // 上传进度
        changeLoading(){ 
          this.NowTotal++;
          let ratio = (this.NowTotal * 100) / (this.AllTotal * 100)
          ratio = Math.round(ratio * 100)
          clearInterval(this.clearT)
          this.clearT = setInterval(()=>{ 
            this.Loading++;
            if(this.Loading>=ratio)clearInterval(this.clearT);
          },10)
        },
        // 视频长度
        videoLong(file){ 
          return new Promise((resolve,reject)=>{ 
            var url = URL.createObjectURL(file);
            var audioElement = new Audio(url);
            audioElement.addEventListener("loadedmetadata", function(_event) { 
              var hour = parseInt((audioElement.duration) / 3600);
              if (hour<10) {  hour = "0" + hour; }
              var minute = parseInt((audioElement.duration % 3600) / 60);
              if (minute<10) {   minute = "0" + minute; }
              var second = Math.ceil(audioElement.duration % 60);
              if (second<10) {  second = "0" + second; }
              resolve(hour + ":" + minute + ":" + second)
            });
          })
        },
        // file :文件 byte :每片字节大小 单位M
        async uploadViedo(file,byte = 2){ 
          
          var duration =await this.videoLong(file);
    
          let chunkSize = byte * 1024 * 1024 //分片大小
          let chunkArr = [];
    
          if (file.size < chunkSize) { 
            chunkArr.push(file.slice(0))
          } else { 
            var start = 0, end = 0
            while (true) { 
              end += chunkSize
              var blob = file.slice(start, end)
              start += chunkSize
    
              if (!blob.size) { 
                break;
              }
              chunkArr.push(blob)
            }
          }
          
          this.AllTotal = chunkArr.length;
    
       
          return new Promise((ok,no)=>{ 
            //预链接
            this.$axios.post('https:',{ 
              "video_number":this.AllTotal,//总共分为几片
              "size":file.size,//文件总大小
              "video_len": duration || 0,//视频长度
              "suffix":file.type,//文件类型
            }).then(res=>{ 
              let all=[];
              chunkArr.forEach((item,index)=>{ 
                let p = new Promise((resolve,reject)=>{ 
                  var data = new FormData();
                  data.append('video', item)//视频主体
                  data.append('name', res.data.data)//视频名称
                  data.append('blob_num', index+1)//当前为第几段视频
                  data.append('total_blob_num', this.AllTotal)//总分为几段
                  //上传主体
                  this.$axios.post('https:',data).then(res=>{ 
                    this.changeLoading();
                    resolve(res)
                  },err=>{ 
                    reject(err)
                  })
                  
                })
                all.push(p);
              })
    
              Promise.all(all).then(res=>{ 
                ok() 
              }).catch(err=>{ 
                no(err)
              })
    
            }).catch(err=>{ 
              no(err)
            })
    
          })
         
        }
      },
      beforeDestroy(){ 
        clearInterval(this.clearT)
      }
    }

## 2.项目中使用 ##

这里仅用element组件 编写示例 方便理解cv到自己项目

<template>
      <div class="hello">
    
    
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-change="preview"
          :multiple="false">
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
    
    
    
      </div>
    </template>
    
    <script>
    import upviedo from './upvideo.js'
    export default { 
      mixins:[upviedo],
      props: { 
        msg: String
      },
      created(){ 
      },
      data() { 
        return { 
          num:0,
        };
      },
      computed:{ },
      mounted(){ 
      },
      methods: { 
        preview(file) { 
          this.num++
          if(this.num>=2)return
          console.log(file.raw)
    		//上面代码都可以无视 这里是最主要的
    		//第一个参数 ：视频文件体 第二个参数：Num 每片视频限制最大字节（单位M） 不传默认2M
          this.uploadViedo(file.raw,2).then(res=>{ 
            console.log('总体完成')
          }).catch(err=>{ 
            console.log('总体失败')
          })
        },
      },
    }
    </script>
    
    <style scoped>
    
    </style>

# 总结 #

本文仅提供思路 根据自己的需求灵活修改 文中不对的地方欢迎大佬指正，使用中出现问题欢迎评论或私信