一、为什么要使用分片上传

要用分片上传，首先要知道为什么要使用分片上传，或者说那些场景下要使用分片上传。

    1.文件过大：一个文件过大，几个G或者几十G的大文件就非常适合分片上传

    2.网络不稳定：网络时好时坏或者比较慢的情况

    3.断点续传：传了一部分后暂停想继续传的时候，分片上传也是个不错的选择(断点续传需要考虑其他因素，这里不做具体详情的讲说)

二、安装spark-md5

npm i spark-md5

三、实现方法

import SparkMD5 from 'spark-md5'
import mofangAi from '@/lib/mofangAi.js'
import $ from 'jquery'
import store from '@/store/index'

// 分片大小 5m
const chunkSize = 5 * 1024 * 1024
// 允许上传的文件类型
const allowType = [
  'image/jpg',
  'image/png'
]

/**
 * 压缩图片
 *@param img 被压缩的img对象
 * @param type 压缩后转换的文件类型
 * @param mx 触发压缩的图片最大宽度限制
 * @param mh 触发压缩的图片最大高度限制
 */
export function compressImg (img, type, mx, mh) {
  return new Promise((resolve) => {
    const canvas = document.createElement('canvas')
    const context = canvas.getContext('2d')
    const { width: originWidth, height: originHeight } = img
    // 最大尺寸限制
    const maxWidth = mx
    const maxHeight = mh
    // 目标尺寸
    let targetWidth = originWidth
    let targetHeight = originHeight
    if (originWidth > maxWidth || originHeight > maxHeight) {
      if (originWidth / originHeight > 1) {
        // 宽图片
        targetWidth = maxWidth
        targetHeight = Math.round(maxWidth * (originHeight / originWidth))
      } else {
        // 高图片
        targetHeight = maxHeight
        targetWidth = Math.round(maxHeight * (originWidth / originHeight))
      }
    }
    canvas.width = targetWidth
    canvas.height = targetHeight
    context.clearRect(0, 0, targetWidth, targetHeight)
    // 图片绘制
    context.drawImage(img, 0, 0, targetWidth, targetHeight)
    canvas.toBlob(function (blob) {
      resolve(blob)
    }, type || 'image/png')
  })
}

// 压缩前将file转换成img对象
function readImg (file) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    const reader = new FileReader()
    reader.onload = function (e) {
      img.src = e.target.result
    }
    reader.onerror = function (e) {
      reject(e)
    }
    reader.readAsDataURL(file)
    img.onload = function () {
      resolve(img)
    }
    img.onerror = function (e) {
      reject(e)
    }
  })
}

// 批量上传图片（选择+拖拽）
export const newUploadFile = async (
  fileList, type
) => {
  for (var i = 0; i < fileList.length; i++) {
    await uploadFile(
      fileList[i], type
    )
  }
}

export const uploadFile = async (
  file, type
) => {
  // 限制上传文件类型
  const arr = file.name.split('.')
  const fileType = arr[arr.length - 1].toLowerCase()
  const fileSize = file.size
  try {
    if (
      fileSize > 15 * 1024 * 1024 &&
      ['png', 'jpg', 'jpeg'].includes(fileType)
    ) {
      const img = await readImg(file)
      const blob = await compressImg(img, file.type, 660, 432)
      const formData = new FormData()
      formData.append('file', blob, file.name)
    }
  } catch (error) {
    console.log('error', error)
  }
  if (!allowType.includes('.' + fileType)) {
    console.log(`暂不支持上传` + fileType + '格式文件')
    return
  }

  let startTime = new Date().getTime()
  let percent = 0

  // 计算当前选择文件需要的分片数量
  let chunkCount = Math.ceil(fileSize / chunkSize)
  if (fileSize > chunkSize) {
    chunkCount--
  }

  // 获取文件md5
  const fileMd5 = await getFileMd5(file)

  // 向后端请求本次分片上传初始化
  const initUploadParams = {
    chunkCount: chunkCount,
    fileMd5: fileMd5,
    fileName: file.name
  }
  try {
    const res = await mofangAi.initChunk(initUploadParams)
    if (res.status === 0) {
      // 上传成功了
      changeProgress(100, startTime, fileSize, type)
      updataSuccess(res.minioOutput.fileName, type)
      return
    }
    if (res.status === 2) {
      // 上传完成，需要合并
      changeProgress(100, startTime, fileSize, type)
      composeFile(fileMd5, file)
      return
    }

    const chunkUploadUrls = res.minioOutputs
    for (let item of chunkUploadUrls) {
      // 分片开始位置
      let start = (item.partNumber - 1) * chunkSize
      // 分片结束位置
      let end = Math.min(fileSize, start + chunkSize)
      if (item.partNumber === chunkCount) {
        end += chunkSize
      }
      // 取文件指定范围内的byte，从而得到分片数据
      let _chunkFile = file.slice(start, end)
      await $.ajax({
        url: item.uploadUrl,
        type: 'PUT',
        contentType: false,
        processData: false,
        data: _chunkFile,
        xhr: xhrOnProgress(function (evt) {
          // 计算百分比
          percent = Math.floor(
            ((chunkSize * (item.partNumber - 1) + evt.loaded) / file.size) * 100
          )
          changeProgress(
            percent,
            startTime,
            fileSize,
            type
          )
        }),
        success: function () { },
        error: function () {
          console.log('上传失败')
        }
      })
    }
    composeFile(fileMd5, file, type)
  } catch (error) {
    console.log('上传失败')
  }
}
/**
 * 请求后端合并文件
 * @param fileMd5
 * @param file
 */
const composeFile = (
  fileMd5,
  file,
  type
) => {
  const composeParams = {
    fileMd5: fileMd5,
    fileName: file.name
  }
  mofangAi.composeFile(composeParams).then((res) => {
    updataSuccess(res.fileName, type)
  })
}

/**
 * 获取文件MD5
 * @param file
 * @returns {Promise<unknown>}
 */
const getFileMd5 = (file) => {
  var fileReader = new FileReader()
  var blobSlice = File.prototype.mozSlice || File.prototype.webkitSlice || File.prototype.slice
  var chunkSize1 = 102400
  var chunks = Math.ceil(file.size / chunkSize1)
  var currentChunk = 0
  var spark = new SparkMD5()
  return new Promise((resolve) => {
    fileReader.onload = function (e) {
      spark.appendBinary(e.target.result) // append binary string
      currentChunk++
      if (currentChunk < chunks) {
        loadNext()
      } else {
        resolve(spark.end())
      }
    }
    fileReader.onerror = () => {
      // ElMessage.error({
      //   message: '文件读取失败，无法上传该文件',
      //   duration: 1000
      // })
      console.log('文件读取失败，无法上传该文件')
      const body = document.querySelector('body')
      const uploadStatus = document.getElementById('upload-status')
      body.removeChild(uploadStatus)
    }

    function loadNext () {
      var start = currentChunk * chunkSize1
      var end = start + chunkSize1 >= file.size ? file.size : start + chunkSize1
      fileReader.readAsBinaryString(blobSlice.call(file, start, end))
    }

    loadNext()
  })
}

// 分片成功的回调
const xhrOnProgress = function (fun) {
  xhrOnProgress.onprogress = fun // 绑定监听
  // 使用闭包实现监听绑
  return function () {
    // 通过$.ajaxSettings.xhr();获得XMLHttpRequest对象
    var xhr = $.ajaxSettings.xhr()
    // 判断监听函数是否为函数
    if (typeof xhrOnProgress.onprogress !== 'function') return xhr
    // 如果有监听函数并且xhr对象支持绑定时就把监听函数绑定上去
    if (xhrOnProgress.onprogress && xhr.upload) {
      xhr.upload.onprogress = xhrOnProgress.onprogress
    }
    return xhr
  }
}

// 上传成功回调
const updataSuccess = function (name, type) {
  let updataSuccessData = {
    name: name,
    type: type
  }
  store.commit('setName', updataSuccessData)
}

// 上传进度更新
const changeProgress = function (
  percent,
  startTime,
  fileSize,
  type
) {
  let nowTime = new Date().getTime()
  console.log('上传进度' + parseInt(percent) + '%')
  console.log('上传时间' + secondsFormat(nowTime - startTime))
  console.log('上传文件剩余大小' + sizeFormat((fileSize * percent) / 100) + '/' + sizeFormat(fileSize))
}

// 计算剩余时间
const secondsFormat = function (ms) {
  var s = Math.floor(ms / 1000)
  var day = Math.floor(s / (24 * 3600))
  var hour = Math.floor((s - day * 24 * 3600) / 3600)
  var minute = Math.floor((s - day * 24 * 3600 - hour * 3600) / 60)
  var second = s - day * 24 * 3600 - hour * 3600 - minute * 60
  let str = ''
  if (day) {
    str += day + ':'
  }
  str =
    str +
    (hour > 9 ? hour : '0' + hour) +
    ':' +
    (minute > 9 ? minute : '0' + minute) +
    ':' +
    (second > 9 ? second : '0' + second)
  return str
}

// 计算剩余大小
const sizeFormat = function (limit) {
  var size = ''
  if (limit < 1 * 1024) {
    size = limit.toFixed(2) + 'B'
  } else if (limit < 1 * 1024 * 1024) {
    size = (limit / 1024).toFixed(2) + 'KB'
  } else if (limit < 1 * 1024 * 1024 * 1024) {
    size = (limit / (1024 * 1024)).toFixed(2) + 'MB'
  } else {
    size = (limit / (1024 * 1024 * 1024)).toFixed(2) + 'GB'
  }
  var sizeStr = size + ''
  var index = sizeStr.indexOf('.')
  var dou = sizeStr.substr(index + 1, 2)
  if (dou === '00') {
    return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
  }
  return size
}