文件分片上传、断点续传、大文件秒传

一、说明

• 解决问题是文件太大，如果上传一个很大文件到服务器，会引起超时导致文件无法上传，这时可以将文件切割成一个一个小的文件循环上传到服务器后再拼接成完整的文件就可以解决这个问题，而且还可以通过并发提速。

二、前端

• 下面代码分为3块，获取初始化ID、循环切割文件并上传、判断上传数量并申请合并文件

<template>
  <div class="components-upload">
    <el-upload
      action
      :auto-upload="false"
      :on-change="onChange"
      :accept="'video/*'"
      :show-file-list="false"
      drag
    >
    <i class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
 <el-progress v-if="progressFlag" :percentage="loadProgressCount"></el-progress>
</div>
</template>

<script>
 
import md5 from 'js-md5'
import { mapGetters } from 'vuex'

export default {
  name: 'upload',
  props: {
    className: {
      type: String
    }
  },
  data (){
    return  {
      video: '',
      fileMD5: '',
      progressFlag: true,
      loadProgress: 0, // 进行到哪个文件 根据百分比换算loadProgressCount
      loadProgressCount: 0, // 当前进度
      chunkCount: 0, //  分片总数
      chunkSize: 2 * 1024 * 1024, // 2MB一片
      uploadId: '782EF406BFFF421AB10AC3292ABB2ACC', // oss文件标识
      videoName: ''
    }
  },
  methods:{
    onChange(event) {
      // 清空数据
      Object.assign(this.$data, this.$options.data())
      this.video = event.raw;
      if(!this.video) return;
      this.videoName = this.video.name
      this.chunkCount = Math.ceil(this.video.size / this.chunkSize) // 切片数量
      let fileRederInstance = new FileReader()
      fileRederInstance.readAsBinaryString(this.video)
      fileRederInstance.addEventListener('load', e => {
        let fileBolb = e.target.result
        this.