分片上传与断点续传

最新推荐文章于 2024-11-12 15:21:10 发布

鹏程933

最新推荐文章于 2024-11-12 15:21:10 发布

阅读量690

点赞数 31

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/weixin_64925940/article/details/125457266

前端专栏收录该内容

9 篇文章

订阅专栏

分片上传与断点续传

Github仓库完整代码

效果

请添加图片描述

采用在线编辑 cloudstudio

初始化

npm i init
npm i express
npm i express-fileupload
npm i axios
npm i crypto-js

为何断点续传

浏览器对文件大小限制
上传失败后重新传送
中断传送后再次传送

实现思路

前端

拿到文件，对文件进行读取操作

function read(file){

  const reader=new FileReader()
  return new Promise(((resolve, reject) => {
    reader.onload=function (){ // 读取成功返回
      resolve(reader.result)
    }
    reader.onerror=reject // 失败返回
    reader.readAsBinaryString(file) // 返回读取的字符串
  }))
}

MD5加密

  const hash=CryptoJS.MD5(content)

对文件进行分片操作

 while (uploaded<size){
    const chunk=file.slice(uploaded,uploaded+chunkSize,type) // file继承自blod,blod有方法slice,可对文件进行切片处理
    const formData=new FormData()
    formData.append('name',name)
    formData.append('type',type)
    formData.append('size',size)
    formData.append('hash',hash)
    formData.append('file',chunk)
    formData.append('offset',uploaded)
    formData.append('index',index)
    axiosArr.push(formData)
    index+=1
    uploaded +=chunk.size


  }

判断这个文件是否上传过（也就是上传到一半中止了）

  const local=localStorage.getItem(hash)

从当前地方继续上传

const newDoneArr=[]
    isDoneArr.map((item,index)=>{
      if(item===0){
        newDoneArr.push(axiosArr[index])
      }
    })
    progress.max=newDoneArr.length-1
    progress.value=0
    multiRequest(newDoneArr,1)

开始上传，加入待上传队列中

function enqueue(queue=[],url){
    const len=queue.push(url)  // 加入队列中
    request(queue,url) // 请求开始
    return len
  }

请求成功，修改状态数据

	const result=await axios.post('/api/upload',formData)
    const i=urlsClone.indexOf(formData) // 上传的是哪个文件
    const hash=formData.get('hash') // 拿到hash标识
    localStorage.setItem(hash,i)// 保存上传的状态
    result[i]=formData
    isDoneArr[i]=1 // 修改状态数据为完成

判定是否上传完成

function dequeue(queue=[],formData){
    progress.value += 1 // 当前上传到哪了
    queue.splice(queue.indexOf(formData),1) // 从queue中移除已完成请求
    if(uls.length){ // 如果还有未上传文件，继续上传
      enqueue(queue,uls.shift())
    }else { // 上传完成给出提示
      if(isDoneArr.indexOf(0)===-1){
        output.innerText='上传成功'
        progress.value=urlsClone.length
        localStorage.removeItem(formData.get('hash'))
      }
    }
  }

后端

利用FS模块向文件中写入数据
先解析出文件名

const {name, type, size, offset, hash,index} = req.body

写入文件

 await appendFile(filename, file.data)