前端大文件上传

一、切片上传技术原理

切片上传是把大文件分割成多个较小的切片，分别上传这些切片，最后在服务器端将它们合并成完整文件。这种方式能有效应对网络不稳定导致的上传失败问题，还可利用多线程并行上传，提升上传效率。

二、前端实现步骤及与后端接口交互

1 文件选择与信息获取

用户通过文件选择框选择要上传的大文件。前端获取文件的基本信息，包括文件名、文件大小、文件类型等。这些信息将在后续的上传过程中发挥重要作用，例如文件名用于服务器端存储文件，文件大小用于计算切片数量和监控上传进度。

2 切片参数设定

根据服务器的性能和网络状况，合理确定切片的大小。一般来说，切片大小可以设置为 1MB - 5MB 之间。较小的切片在网络不稳定时能更好地实现断点续传，但会增加服务器合并的工作量；较大的切片则反之。

3 文件切片操作

使用 JavaScript 的 File.prototype.slice 方法对文件进行切片。从文件的起始位置开始，按照设定的切片大小依次截取文件片段，直到文件末尾。每个切片都有其在原文件中的偏移量和唯一标识，方便服务器识别和排序。

4 切片信息生成

为每个切片生成唯一的标识，可采用 UUID 算法。同时记录切片的索引、总切片数量、文件的唯一标识等信息。这些信息将与切片数据一起发送到服务器，用于服务器端的切片合并和文件完整性验证。

5 预上传请求（与后端接口 1：预检查接口）

接口功能

前端向后端发送预上传请求，携带文件的基本信息（文件名、文件大小、文件哈希值等）。后端接收到请求后，检查该文件是否已存在于服务器中。若存在，则返回已上传的切片信息，前端可以根据这些信息跳过已上传的切片，直接上传未完成的部分；若不存在，则为此次上传创建记录，并返回允许上传的标识，前端可以开始上传所有切片。

接口请求方式

通常采用 POST 请求，将文件信息以 JSON 格式或表单数据的形式发送到后端。

接口返回数据

• 若文件已存在：返回已上传的切片索引列表。

• 若文件不存在：返回一个唯一的上传标识，用于后续切片上传和合并操作的关联。

6 切片上传请求（与后端接口 2：切片上传接口）

接口功能

前端根据预上传请求的结果，将未上传的切片逐个发送到后端。每个请求携带切片数据、切片信息（索引、总切片数量、文件唯一标识等）。后端接收到切片后，将其存储到临时目录，并记录切片的存储路径和相关信息。

接口请求方式

采用 POST 请求，请求体为 multipart/form-data 格式，包含切片文件和切片信息。

接口返回数据

返回上传成功的标识或状态码，前端根据返回结果更新上传进度和状态。

3.7 上传进度监控

在切片上传过程中，前端实时监控上传进度。可以通过监听请求的 progress 事件，获取已上传的字节数和总字节数，计算出上传进度百分比，并将进度信息展示给用户。同时，将上传进度信息存储在本地，以便在上传中断后恢复时使用。

3.8 断点续传处理

若上传过程中出现网络中断或其他异常情况，前端记录已上传的切片信息。重新上传时，再次调用预上传接口，获取未上传的切片列表，继续上传未完成的切片，实现断点续传功能。

9 合并请求（与后端接口 3：切片合并接口）

接口功能

当所有切片上传完成后，前端向后端发送合并请求，携带文件唯一标识和总切片数量。后端接收到请求后，根据记录的切片信息，按顺序将切片合并成完整文件，并进行完整性验证。验证通过后，将合并后的文件移动到指定存储位置，并清理临时切片文件。

接口请求方式

采用 POST 请求，将文件唯一标识和总切片数量以 JSON 格式或表单数据的形式发送到后端。

接口返回数据

返回合并成功的标识或状态码，以及合并后文件的存储路径或访问链接。

<template>
  <div class="break-point">
    <div class="gva-table-box">
      <el-divider content-position="left">大文件上传</el-divider>
      <form id="fromCont" method="post">
        <div class="fileUpload" @click="inputChange">
          选择文件
          <input v-show="false" id="file" ref="FileInput" multiple="multiple" type="file" @change="choseFile">
        </div>
      </form>
      <el-button :disabled="limitFileSize" type="primary" size="small" class="uploadBtn" @click="getFile">上传文件</el-button>
      <div class="el-upload__tip">请上传不超过5MB的文件</div>
      <div class="list">
        <transition name="list" tag="p">
          <div v-if="file" class="list-item">
            <el-icon>
              <document />
            </el-icon>
            <span>{{ file.name }}</span>
            <span class="percentage">{{ percentage }}%</span>
            <el-progress :show-text="false" :text-inside="false" :stroke-width="2" :percentage="percentage" />
          </div>
        </transition>
      </div>
      <div class="tips">此版本为先行体验功能测试版，样式美化和性能优化正在进行中，上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</div>
    </div>
  </div>

</template>

<script setup>
import SparkMD5 from 'spark-md5'
import {
  findFile,
  breakpointContinueFinish,
  removeChunk,
  breakpointContinue
} from '@/api/breakpoint'
import { ref, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { ElLoading } from 'element-plus'

const file = ref(null) // 读取的文件信息，可以读取文件大小、同时生成MD5标识等等。
const fileMd5 = ref('') // Md5加密标识
const formDataList = ref([]) // 分片存储的一个池子，{ key: sliceIndex.value, formData }
const waitUpLoad = ref([]) // 当是断点续传，剩下没有上传的切片
const waitNum = ref(NaN) // 当是断点续传，剩下没有上传的切片数量
const limitFileSize = ref(false)
const percentage = ref(0)
const percentageFlage = ref(true)
const FileSliceCap = 10 * 1024 * 1024 // 分片字节数，如果分的太细需要发送很多个分片请求。
const sliceStart = ref(0) // 定义分片开始切的地方
const sliceEnd = ref(0) // 每片结束切的地方a
const sliceIndex = ref(0) // 第几片
const allChunkSize = ref(0) // 所有大切片的累加体积
const isCreateMd5 = ref(true) // 是否生成Md5
const limitSize = 2000 * 1024 * 1024 // 浏览器对于上传的文件有限定大小，大于2G的文件无法上传。我们需要对大于2G的文件先切成大的chunk
const ChunkSizeCap = 2000 * 1024 * 1024 // 大的chunk容量
const maxSize = 10000 * 1024 * 1024 // 限制上传的文件大小
let moreThan_2G = false

const init = () => {
  percentage.value = 0
  allChunkSize.value = 0
  sliceStart.value = 0
  sliceEnd.value = 0
  sliceIndex.value = 0
  moreThan_2G = file.value.size > limitSize
  isCreateMd5.value = true
}

// 选中文件的函数。如果文件大于2G，先进行一次切片。
const choseFile = async(e) => {
  const fileInput = e.target.files[0] // 获取当前文件
  file.value = fileInput
  init()
  if (file.value.size < maxSize) {
    if (moreThan_2G) {
      formDataList.value = []
      let chunkStart = 0
      let chunkEnd = 0
      let chunkIndex = 0
      while (chunkEnd < file.value.size) {
        chunkStart = chunkIndex * ChunkSizeCap // 计算每片开始位置
        chunkEnd = (chunkIndex + 1) * ChunkSizeCap // 计算每片结束位置
        const fileChunk = file.value.slice(chunkStart, chunkEnd)
        sliceChunk(fileChunk)
        chunkIndex++
      }
    } else {
      sliceChunk(file.value)
    }
  } else {
    limitFileSize.value = true
    ElMessage('请上传小于5M文件')
  }
}

/**
 * 对文件进行切片，同时根据文件信息生成md5，md5用于后端识别文件。
 * 切片信息包括：
 *  -md5
 *  -当前切片文件
 *  -当前是第几片
 *  -文件名
 * @param fileChunk
 */
const sliceChunk = (fileChunk) => {
  const fileR = new FileReader() // 创建一个reader用来读取文件流
  percentage.value = 0
  fileR.readAsArrayBuffer(fileChunk) // 把文件读成ArrayBuffer  主要为了保持跟后端的流一致
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  fileR.onload = async e => {
    allChunkSize.value += fileChunk.size
    if (isCreateMd5.value) {
      // 读成arrayBuffer的回调 e 为方法自带参数 相当于 dom的e 流存在e.target.result 中
      const blob = e.target.result
      const spark = new SparkMD5.ArrayBuffer() // 创建md5制造工具
      spark.append(blob) // 文件流丢进工具
      fileMd5.value = spark.end() // 工具结束 产生一个总文件的md5
      isCreateMd5.value = false
    }
    // 当结尾数字大于文件总size的时候 结束切片
    while (sliceEnd.value < file.value.size) {
      sliceStart.value = sliceIndex.value * FileSliceCap // 计算每片开始位置
      sliceEnd.value = (sliceIndex.value + 1) * FileSliceCap // 计算每片结束位置
      var fileSlice = fileChunk.slice(sliceStart.value, sliceEnd.value) // 开始切  file.slice 为 h5方法 对文件切片 参数为 起止字节数
      const formData = new window.FormData() // 创建FormData用于存储传给后端的信息
      formData.append('fileMd5', fileMd5.value) // 存储总文件的Md5 让后端知道自己是谁的切片
      formData.append('file', fileSlice) // 当前的切片
      formData.append('chunkNumber', sliceIndex.value) // 当前是第几片
      formData.append('fileName', file.value.name) // 当前文件的文件名 用于后端文件切片的命名  formData.appen 为 formData对象添加参数的方法
      formDataList.value.push({ key: sliceIndex.value, formData }) // 把当前切片信息 自己是第几片 存入我们方才准备好的池子
      sliceIndex.value++
    }
    if (allChunkSize.value === file.value.size) {
      loading.close()
      submitSlice()
    }
  }
  fileR.onerror = async e => {
    loading.close()
    ElMessage('文件读取失败')
  }
}

/**
 * 提交给后端要上传的文件信息，包括md5，切片数量等等。
 * 后端根据前端生成的md5与数据库文件的md5进行对比，如果一致那么就表示上传完成实现了秒传功能。
 * 如果数据库没有上传成功的文件，那么后端会返回对应文件已经上传的切片数据。
 * 前端formDataList和对应文件已经上传的切片数据进行对比，判断还需要上传哪些切片，从而实现断点上传。
 * @returns {Promise<void>}
 */
const submitSlice = async() => {
  const params = {
    fileName: file.value.name,
    fileMd5: fileMd5.value,
    chunkTotal: formDataList.value.length
  }
  console.log(params)
  const res = await findFile(params)
  // 全部切完以后 发一个请求给后端 拉当前文件后台存储的切片信息 用于检测有多少上传成功的切片
  const finishList = res.data.file.ExaFileChunk // 上传成功的切片
  const IsFinish = res.data.file.IsFinish // 是否是同文件不同命 （文件md5相同 文件名不同 则默认是同一个文件但是不同文件名 此时后台数据库只需要拷贝一下数据库文件即可 不需要上传文件 即秒传功能）
  if (!IsFinish) {
    // 当是断点续传时候
    waitUpLoad.value = formDataList.value.filter(all => {
      return !(finishList &&
          finishList.some(fi => fi.FileChunkNumber === all.key)
      )
    })
  } else {
    waitUpLoad.value = [] // 秒传则没有需要上传的切片
    ElMessage.success('文件已秒传')
  }
  waitNum.value = waitUpLoad.value.length // 记录长度用于百分比展示
}

const getFile = () => {
  // 确定按钮
  if (file.value === null) {
    ElMessage('请先上传文件')
    return
  }
  if (percentage.value === 100) {
    percentageFlage.value = false
  }
  sliceFile() // 上传切片
}

/**
 * 获取当前切片md5，主要用于后端验证切片完整性
 */
const sliceFile = () => {
  waitUpLoad.value &&
  waitUpLoad.value.forEach(item => {
    // 需要上传的切片
    item.formData.append('chunkTotal', formDataList.value.length) // 切片总数携带给后台 总有用的
    const fileR = new FileReader() // 功能同上
    const fileF = item.formData.get('file')
    fileR.readAsArrayBuffer(fileF)
    fileR.onload = e => {
      const spark = new SparkMD5.ArrayBuffer()
      spark.append(e.target.result)
      item.formData.append('chunkMd5', spark.end())
      upLoadFileSlice(item)
    }
  })
}

watch(() => waitNum.value, () => {
  percentage.value = Math.floor(((formDataList.value.length - waitNum.value) / formDataList.value.length) * 100)
})

/**
 * 上传切片信息，有多少个切片就发送多少个请求，因此切片大小和数量要根据实际情况去定。
 * 切片上传完毕以后，还要给后端再次发送一次请求，让后端合成文件并删除缓存切片。
 */
const upLoadFileSlice = async(item) => {
  // 切片上传
  const fileRe = await breakpointContinue(item.formData)
  if (fileRe.code !== 0) {
    return
  }
  waitNum.value-- // 百分数增加
  if (waitNum.value === 0) {
    // 切片传完以后 合成文件
    const params = {
      fileName: file.value.name,
      fileMd5: fileMd5.value
    }
    const res = await breakpointContinueFinish(params)
    if (res.code === 0) {
      // 合成文件过后 删除缓存切片
      const params = {
        fileName: file.value.name,
        fileMd5: fileMd5.value,
        filePath: res.data.filePath,
      }
      ElMessage.success('上传成功')
      await removeChunk(params)
    }
  }
}

const FileInput = ref(null)
const inputChange = () => {
  FileInput.value.dispatchEvent(new MouseEvent('click'))
}
</script>

<script>

export default {
  name: 'BreakPoint'
}
</script>

<style lang="scss" scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}

#fromCont {
  display: inline-block;
}

.fileUpload {
  padding: 3px 10px;
  font-size: 12px;
  height: 20px;
  line-height: 20px;
  position: relative;
  cursor: pointer;
  color: #000;
  border: 1px solid #c1c1c1;
  border-radius: 4px;
  overflow: hidden;
  display: inline-block;

  input {
    position: absolute;
    font-size: 100px;
    right: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
  }
}

.fileName {
  display: inline-block;
  vertical-align: top;
  margin: 6px 15px 0 15px;
}

.uploadBtn {
  position: relative;
  top: -10px;
  margin-left: 15px;
}

.tips {
  margin-top: 30px;
  font-size: 14px;
  font-weight: 400;
  color: #606266;
}

.el-divider {
  margin: 0 0 30px 0;
}

.list {
  margin-top: 15px;
}

.list-item {
  display: block;
  margin-right: 10px;
  color: #606266;
  line-height: 25px;
  margin-bottom: 5px;
  width: 40%;

  .percentage {
    float: right;
  }
}

.list-enter-active, .list-leave-active {
  transition: all 1s;
}

.list-enter, .list-leave-to
  /* .list-leave-active for below version 2.1.8 */
{
  opacity: 0;
  transform: translateY(-30px);
}
</style>

import request from '@/utils/request'

// 查找文件
export const findFile = (params) => {
  return request({
    url: '/fileUploadAndDownload/findFile',
    method: 'post',
    data: params
  })
}

// 断点续传
export const breakpointContinue = (data) => {
  return request({
    url: '/fileUploadAndDownload/breakpointContinue',
    method: 'post',
    data: data
  })
}

// 断点续传完成
export const breakpointContinueFinish = (params) => {
  return request({
    url: '/fileUploadAndDownload/breakpointContinueFinish',
    method: 'post',
    data: params
  })
}

// 删除切片
export const removeChunk = (params) => {
  return request({
    url: '/fileUploadAndDownload/removeChunk',
    method: 'post',
    data: params
  })
}