大文件分片上传

tips:上传几个G的文件都没有问题,

代码直接引入即可

upload.js

import md5 from 'js-md5' //引入MD5加密
import { upload } from './gAjax'  // 这里指前端调用接口的api方法
export const uploadByPieces = ({ type,lang_name, file, pieceSize = 5, progress, success, error }) => {
  // let fileMD5 = ''// 总文件列表
  let md5String=md5(file.name+new Date().getTime())//当前文件唯一标识  文件名称+时间 MD5加密的唯一标识
  var i = 0
  const chunkSize = pieceSize * 1024 * 1024 // 5MB一片
  const chunkCount = Math.ceil(file.size / chunkSize) // 总片数
  console.log(file,chunkCount);
  // 获取md5
  const readFileMD5 = () => {
    readChunkMD5()
  }
  const getChunkInfo = (file, currentChunk, chunkSize) => {
    let start = currentChunk * chunkSize
    let end = Math.min(file.size, start + chunkSize)
    let chunk = file.slice(start, end)
    return { start, end, chunk }
  }
  // 针对每个文件进行chunk处理
  const readChunkMD5 = () => {
    const { chunk } = getChunkInfo(file, i, chunkSize)
    uploadChunk({ chunk, currentChunk: i, chunkCount })
  }
  const uploadChunk = (chunkInfo) => {
    // progressFun()
    let config = {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
    console.log(md5String);
  // 创建formData，下面是结合不同项目给后端传入的对象。
    let fetchForm = new FormData()
    fetchForm.append('file', chunkInfo.chunk) //文件
     fetchForm.append('fileMD5', md5String)//文件唯一标识
     fetchForm.append('fileSize', file.size)//文件大小
     fetchForm.append('fileName', file.name)//文件名称
     fetchForm.append('shardIndex',chunkInfo.currentChunk + 1)//当前分片 注文件时从0开始的  所以这里+1
     fetchForm.append('shardTotal',chunkCount) //分片总数
     fetchForm.append('type',type)//类型
     fetchForm.append('langName',lang_name)//语言
    // console.log("分片上传成功")
    upload("/uploadShardFile", fetchForm).then((res) => {
      //这个定义接口返回的状态 可根据后端返回的值来修改
if(res.code=="100"){
    if(i < chunkCount-1){
        i++
        readChunkMD5()
        //实时返回进度    这个code码是自己定义的 可修改 不要和后端的返回码中途  
        success({code:"999",total:chunkCount,shardIndex:chunkInfo.currentChunk + 1})
    }else{
    console.log("结束");
    //上传完成
    success(res)
    }  
}else{
  //上传失败 
  success(res)
}
      });
  }
  readFileMD5() // 开始执行代码
}

upload.vue引入

import { uploadByPieces } from "../requset/upload"

upload.vue的使用

       uploadByPieces({
        type: this.value, //  根据项目看情况 是否要加
        lang_name:  this.upload_lang, //  根据项目看情况 是否要加
        file:   this.file.raw, // 文件实体
        pieceSize: 2, // 分片大小
        success: data => {
          console.log('分片上传文件', data)
           if(data.code=="100"){
this.$message({
            message: "上传成功",
            type: "success",
          });
           }else if(data.code=="999"){
           let progress= data.shardIndex/data.total*100)+"% //百分比进度
           }
             else{
               this.$message({
            message: data.msg,
            type: "warning",
          });
           }
              
        },
        error: e => {
          console.log('分片上传视频失败', e)
        }
      })