結(jié)合背景：前段時(shí)間，由于趕項(xiàng)目沒(méi)及時(shí)更新簡(jiǎn)書及博客園,今天更新一版。 移動(dòng)端中 有一個(gè)小需求就是 上傳大文件視頻，正常的情況下 是一定會(huì)遇到上傳超時(shí)心例，或者無(wú)法上傳的情況，所以就搞了一個(gè)公用的文件孤荣；代碼如下：

import md5 from 'js-md5' //引入MD5加密
import { fileUpload } from '@/api/common.js'  // 這里指前端調(diào)用接口的api方法
export const uploadByPieces = ({ randoms, file, pieceSize = 2, progress, success, error }) => {
  // 如果文件傳入為空直接 return 返回
  if (!file || !file.length) return
  let fileMD5 = ''// 總文件列表
  const chunkSize = pieceSize * 1024 * 1024 // 5MB一片
  const chunkCount = Math.ceil(file.size / chunkSize) // 總片數(shù)
  // 獲取md5
  const readFileMD5 = () => {
    // 讀取視頻文件的md5
    console.log("獲取文件的MD5值")
    let fileRederInstance = new FileReader()
    console.log('file', file)
    fileRederInstance.readAsBinaryString(file)
    fileRederInstance.addEventListener('load', e => {
      let fileBolb = e.target.result
      fileMD5 = md5(fileBolb)
      console.log('fileMD5', fileMD5)
      console.log("文件未被上傳，將分片上傳")
      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 }
  }
  // 針對(duì)每個(gè)文件進(jìn)行chunk處理
  const readChunkMD5 = () => {
    // 針對(duì)單個(gè)文件進(jìn)行chunk上傳
    for (var i = 0; i < chunkCount; i++) {
      const { chunk } = getChunkInfo(file, i, chunkSize)
      console.log("總片數(shù)" + chunkCount)
      console.log("分片后的數(shù)據(jù)---測(cè)試：" + i)
      console.log(chunk)
      uploadChunk({ chunk, currentChunk: i, chunkCount })
    }
  }
  const uploadChunk = (chunkInfo) => {
    // progressFun()
    let config = {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    }
  // 創(chuàng)建formData對(duì)象须揣，下面是結(jié)合不同項(xiàng)目給后端傳入的對(duì)象盐股。
    let fetchForm = new FormData()
    fetchForm.append('identifier', randoms)
    fetchForm.append('chunkNumber', chunkInfo.currentChunk + 1)
    fetchForm.append('chunkSize', chunkSize)
    fetchForm.append('currentChunkSize', chunkInfo.chunk.size)
    fetchForm.append('file', chunkInfo.chunk)
    fetchForm.append('filename', file.name)
    fetchForm.append('totalChunks', chunkInfo.chunkCount)
    fetchForm.append('totalSize', chunkSize)
    // fetchForm.append('md5', fileMD5)
    fileUpload(fetchForm, config).then(res => {
      console.log("分片上傳返回信息："+ res)
      if (res.code == 200) {
    // 結(jié)合不同項(xiàng)目 將成功的信息返回出去，這里可變的是指 res.data[0]
        success(res.data[0])
    // 下面如果在項(xiàng)目中沒(méi)有用到可以不用打開注釋
        // if (chunkInfo.currentChunk < chunkInfo.chunkCount - 1) {
        //   console.log("分片上傳成功")

        // } else {
        //   // 當(dāng)總數(shù)大于等于分片個(gè)數(shù)的時(shí)候
        //   if ((chunkInfo.currentChunk + 1) == chunkInfo.chunkCount) {
        //     console.log("文件開始------合并成功")
        //     success(res.data[0])
        //   }
        // }
      }
      else {
        console.log(res.message)
      }
    }).catch((e) => {
      error && error(e)
    })
  }
  readFileMD5() // 開始執(zhí)行代碼
}

組件中調(diào)用即可:

// 引入
import { uploadByPieces } from ''
// 調(diào)用
 uploadByPieces({
        randoms: '', // 隨機(jī)數(shù)耻卡，這里作為給后端處理分片的標(biāo)識(shí) 根據(jù)項(xiàng)目看情況 是否要加
        file: file.file, // 視頻實(shí)體
        pieceSize: 3, // 分片大小
        success: data => {
          console.log('分片上傳視頻成功', data)
        },
        error: e => {
          console.log('分片上傳視頻失敗', e)
        }
      })