本文共 5816 字，大约阅读时间需要 19 分钟。

----整体流程解析 - 1

断点续传首先要满足的功能是第一次上传30%关闭上传后，再次上传此文件继续从30%开始继续上传。 要想满足此功能，首先要做的是把一个文件切割成多份上传，而每次上传时，后台需要告诉你此文件已经上传了多少份。 例：A文件(100M)，切割成100份，每一份有一个id，如1-100，第一次上传了id1-30的切片文件总计三十份，打断上传后，第二次上传时后台先告诉你已上传id1-30，前端知道后，直接从id31开始上传，做到了续传的实现。

----整体流程解析 - 2

功能实现至少需要后台提供三个接口。 1 - 注册上传任务接口 此接口需要传给后台需要上传的文件的md5，并且针对这个文件开启一个上传任务，后台根据你传的文件的md5判断此文件有没有上传过，如果上传过需要告诉你此文件已经上传了几份(切片id数组)，你根据此数组过滤出已经上传过的切片，只上传没上传过的切片。 2 - 上传文件切片接口 此接口需要轮巡多次调用，把文件切片传给后台 3 - 上传结束，文件合并接口 切片接口调用结束后

----上代码

第一步拿到file，我在这里是直接用的Ant Design的Upload组件,也可以直接用input，只要能拿到file就可以

// 一 、第一个函数(file前置处理函数)customRequest: async (params: {
    file }) => {
         setLoading(true) // 开启页面loading，避免切片大文件期间用户乱点，每个项目开启loading的api不同，不一定是setLoading      const {
    file } = params // 拿到file      const {
    size, type, name } = file // 解构出可能用到的几个属性      // 1.格式判断(types是props参数，是支持的格式数组，例：types: ['jpg', 'png', 'bmp', 'jpeg'])，如果不需要做格式限制，可以不写第一条的代码      if (types.length !== 0) {
           const fileExt = /\.([0-9a-zA-Z]+)$/i.exec(name)[1] // 获取后缀        const reg = new RegExp(`(${
     types.join('|')})$`)        if (!reg.test(type) && !reg.test(fileExt)) {
             setLoading(false) // 关闭loading          message.error(messageError) // 格式不对提示页面提示，提示语messageError也是props传进来的参数，也可以直接写死几个字如“格式不正确”          return false        }      }      // 2.大文件判断（maxSize是props参数，让用户自定义限制最大上传文件大小）      if (size > maxSize * 1024 * 1024) {
           setLoading(false) // 关闭loading        message.error('文件格式或大小不符合要求，请重新上传！')        return false      }      // 3.获取文件md5值（文件的md5值是根据文件内容生成的一个单独的标示，需要安装并引入一个插件：import SparkMD5 from 'spark-md5'）      const result: any = await fileParse(file, 'buffer') // fileParse转换函数我附在最下面👇，将file转成buffer格式数据，      const spark = new SparkMD5.ArrayBuffer()      spark.append(result)      const hash = spark.end() // 获取到的文件md5值      // 4.重复文件判断      	   /** 如果重复直接提示并return，此部分代码根据框架不同自己写，如果不需要做去重可不写，这里就不贴出来了…… **/      // 5.文件切片上传      const partSize = 5 * 1024 * 1024 // 考虑到前后端上传效率，我这里是切成5M/片,这个可根据项目实际需要自己决定      const share = size <= partSize ? 1 : size / partSize // 判断如果文件<=5M,不切片，超过按照5M每份切      let cur = 0      const partList = [] // 存储文件切片的数组      for (let i = 0; i < share; i++) {
           const obj = {
             file: file.slice(cur, cur + partSize), // 调用file.slice方法进行file的切片，第一个参数从哪里开始切，第二个参数切到哪里          id: i + 1 // 每一个切片的单独标示，后期续传时用与去除已上传部分的切片        }        partList.push(obj) // 把切的每一片统一放到一个数组里        cur += partSize      }      isOpen = true // isOpen代表上传开关，true标示打开上传开关，false标示关闭上传开关，你可以定义不同的名字，并且在哪里定义看你所用的框架      setLoading(false) // 关闭loading      // 6.调用断点续传      register(partList, hash, name) // 此函数往下看👇    },    	// 二 、 第二个函数（注册上传任务函数 -- 调用第一个接口，注册上传任务接口）	const register = (partList, hash, fileName) => {
       // 1.调第一个接口，上传任务注册接口，参数需要将文件的md5传过去，后台专门根据此文件开启一个上传任务（一个文件对应一个上传任务）    taskRegistration({
    fileMd5: hash })      .then((res) => {
           const {
    uploadId, status, partNumSet } = res.data // uploadId是与这个文件对应的上传任务的id标示，status是此文件的状态，如已上传部分切片||从未进行上传，这是第一次||已经上传完了还未进行合并，partNumSet是一个数组，里面放着已经上传的切片的id，如果是从未进行上传，就是空数组        const mergeParame = {
    hash, uploadId, fileName }        if (status === 1) {
    // 1.已全部上传，未合并，直接调合并函数          complete(mergeParame)        } else if (status === 2) {
    // 2.已上传部分，根据后台返回的partNumSet字段(已上传切片id的数组)筛选，去除已上传部分，把剩下的切片组成一个新数组，如果筛选出来的新数组长度是0说明切片都已上传，直接合并，否则调用上传切片函数          const newPartList = []          partList.forEach((item) => {
               if (partNumSet.indexOf(`${
     item.id}`) === -1) {
                 newPartList.push(item)            }          })          if (newPartList.length === 0) {
             	complete(mergeParame)          } else {
               newRequestArr(newPartList, hash, fileExt, uploadId, mergeParame)          }        } else if (status === 3) {
    // 3.从未上传过此文件，调用上传切片函数          newRequestArr(partList, hash, fileExt, uploadId, mergeParame)        }      })  }  // 三 、 第三个函数（上传切片函数 -- 调用第二个接口，上传文件切片接口）  const newRequestArr = (partList, hash, fileExt, uploadId, mergeParame) => {
       let i = 0    const fn = () => {
         const formData = new FormData() // 通过form将file切片传给后台      formData.append('file', partList[i].file)      formData.append('fileMd5', hash)      formData.append('fileExt', fileExt)      formData.append('uploadId', uploadId)      formData.append('partNumber', partList[i].id)      sliceUpload(formData).then(() => {
           if (isOpen.current) {
    // 如果上传开关在这里是false，则会停止递归调用上传函数，至于在哪里把他置为false，看你在哪里点击触发的暂停或者删除上传函数了，自己决定          i += 1          if (i < partList.length) {
               fn()          } else {
               complete(mergeParame) // 如果是最后一个切片，则调用合并函数          }        }      })    }    fn()  }    	// 四 、 第四个函数（文件合并函数 -- 调用第三个接口，文件合并接口）  	const complete = (mergeParame) => {
       fileMerge(mergeParame).then((res) => {
         const {
    status, fileId } = res.data      if (status === 1) {
           message.error('上传失败，请重试！')        return      }      if (status === 2) {
           message.error('有其它用户正在上传该文件，请稍后重试！')        return      }    })  }  	// 转换函数    const fileParse = (file, type = 'base64') => {
     	return new Promise((res) => {
       const fileReader = new FileReader()    /* fileReader.readAsArrayBuffer() // 转成buffer格式数据      fileReader.readAsBinaryString() // 转成二进制格式数据      fileReader.readAsDataURL() // 转成base64格式数据      解析过程是异步，所以需要调用onload事件的e.target.result获取转换后的结果     */    switch (type) {
         case 'base64':        fileReader.readAsDataURL(file)        break      case 'buffer':        fileReader.readAsArrayBuffer(file)        break      case 'binary':        fileReader.readAsBinaryString(file)        break      default:        break    }    fileReader.onload = (e) => {
         res(e.target?.result)    }  })}

此代码只是实现了基础的断点续传，一般还需实现进度条和文件列表，这些可以根据自己使用的框架和自己的ui和需求自己写就可以了，在这里就不贴代码了，希望可以对有需要的同学起到帮助，谢谢

转载地址：http://wlqzi.baihongyu.com/