超详细前端大文件分片上传和断点续传思路

这里后端采用的是阿里对象存储 OSS

前端这里的步骤分为：

一：大文件上传（在这一步需要保存上传后的大文件file信息，后面断点续传功能会用到）
这里使用element plus组件库中的upload组件

1. action：为后台上传文件接口地址
2. headers：上传文件接口请求头，通常来配置
   const headers = ref({ Authorization: "Bearer " + getToken() });
3. before-upload：正式上传文件之前，可以做一些自定义限制
4. on-success：上传成功之后，可以做一些自定义操作

 <el-upload
  v-model="fileList"
  :action="uploadFileServerUrl"
  :headers="headers"
  :before-upload="handleBeforeUpload"
  :on-success="handleUploadSuccess"
>
  <el-button
    @click="smallFileUpload"
  >选取文件</el-button>
</el-upload>
const handleBeforeUpload = (file) => {
    
    
}
//  上传成功
let originFile = null
const handleUploadSuccess = (res, file) => {
    
    
  originFile = file.raw
}

二：大文件上传后，在文件还没有上传完成的过程中调用文件上传状态查询
这里呢很简单，只需要调用后端提供的接口就ok，通常查询状态接口的参数，就是你oss上面正在上传的文件的名称
直接调用接口

let res = await ossFileUploadGetStatus({
    
    
	fileName
})

请求示例

为什么这里会出现多次状态查询的接口呢？因为你在功能点中需要确认文件什么时候完成，如果文件没有上传完成，而后面你又暂停了文件上传，那么后端是无法从oss中关联你某条信息保存的是哪一个文件（即文件暂停上传的时候，最好不错保存整个新增页面的信息）
这里我们写了一个轮询的机制，用来调用查询接口，无论接口请求超时，还是没有完成状态，我们都继续查询状态，知道文件为完成状态《这里我们以后端返回为4为标准来判定为完成我们才结束轮询

// 设置一个查询文件状态的定时器
const setBigFileUploadTimeout = (fileName) => {
    
    
  if (!fileList.length) return false
  let bigFileTimer = setTimeout(async () => {
    
    
    try {
    
    
      let res = await ossFileUploadGetStatus({
    
    
        fileName
      })
      if (res.code == 200) {
    
    
        isBigFileUploadingStatus.value = res.data
        if (res.data == 4 || !res.data) {
    
    
          clearTimeout(bigFileTimer)
        } else {
    
    
          setBigFileUploadTimeout(fileName)
        }
      } else {
    
    
        setBigFileUploadTimeout(fileName)
      }
    } catch (error) {
    
    
      console.log('接口请求超时');
      setBigFileUploadTimeout(fileName)
    }
  }, 5000);
}

三：暂停大文件上传
这一步也很简单，调用暂停接口（接口参数通常为正在上传的大文件在oss中的文件名）
请求示例：

let res = await ossFilePause({
    
     fileName: fileList[0].uploadFileName })

四：继续大文件上传
这就需要注意了喔
1：调用续传接口需要注意，这里的参数为源文件，为什么呢？
因为后端需要根据源文件去过滤已经上传完成了的片段，那么剩下来的文件片段片段继续上传
2：如何拿到源文件呢？
这里我们第一步上传的时候有提到过，就是在文件上传成功后通过自定义变量来保存一下源文件信息
原文件啊信息格式为：

知道上面两点以后，我们就可以继续开发功能了

//利用了FormData
 let formData = new FormData();
 formData.append('file', originFile)
 let res = await ossFileResume(formData)

请求示例：