vue实现大文件切片上传、断点续传、并发数控制等

最近在学习文件上传相关知识,记录下整体流程

页面效果
一、上传按钮和进度条等

上传文件

上传

hash进度条

网格进度条

二、选择文件
//点击按钮上传
handlerChange (e) {
  const [file] = e.target.files
  if (!file) return
  this.fileData = file
}
//拖拽上传
dragRelevant () {
  const dragDom = this.$refs.drag
  //进入区域
  dragDom.addEventListener('dragover', e => {
    dragDom.style.borderColor = '#f00'
    e.preventDefault()
  })
  //离开区域
  dragDom.addEventListener('dragleave', e => {
    dragDom.style.borderColor = '#41B883'
    e.preventDefault()
  })
  //放下文件
  dragDom.addEventListener('drop', e => {
    dragDom.style.borderColor = '#41B883'
    const [file] = e.dataTransfer.files
    if (!file) return
    this.fileData = file
    e.preventDefault()
  })
}
三、利用文件内容计算hash

为了防止文件上传重复,我们可以使用将每个文件都用hash作为文件名来上传,这里用的是spark-md5来计算hash值。
首先定一个分块的大小

const CHUNK_SIZE = 1 * 1024 * 1024 //每次分片大小

因为大文件用整个内容来计算hash肯定是很慢的,我们不能阻塞页面执行其他任务,所以我通过下面三种方式来计算:

  • 使用WebWorker来计算
//使用webWorker来计算文件的md5值
calculateHashByWebWorker (chunks) {
  this.hashProgress = 0 //hash进度条
  return new Promise(resolve => {
    const worker = new Worker('/hash.js')
    worker.postMessage(chunks)
    worker.onmessage = e => {
      const { hash, progress } = e.data
      this.hashProgress = progress
      if (hash) {
        resolve(hash)
      }
    }
  })
}
  • 使用requestIdleCallbck来计算
//使用requestIdleCallbck来计算文件的md5值  这个方法会在浏览器空闲时调用
calculateHashByRequestIdleCallback (chunks) {
  return new Promise(resolve => {
    const spark = new Spark.ArrayBuffer()
    let count = 0
    const appendToSpark = file => {
      return new Promise(resolve => {
        const reader = new FileReader()
        reader.readAsArrayBuffer(file)
        reader.onload = data => {
          spark.append(data.target.result)
          resolve()
        }
      })
    }
    const workLoop = async deadLine => {
      while (count < chunks.length && deadLine.timeRemaining() > 1) {
        await appendToSpark(chunks[count].file)
        count++
        if (count < chunks.length) {
          this.hashProgress = (count * 100 / chunks.length).toFixed(2) - 0
        } else {
          this.hashProgress = 100
          resolve(spark.end())
        }
      }
      window.requestIdleCallback(workLoop)
    }
    window.requestIdleCallback(workLoop)
  })
}
  • 实现抽样hash,降低精度,提高效率
    大文件每次都全量计算md5的话,效率很低,如果我们每次取每个分片的一部分用来计算,这样会大大提高计算的效率
//抽样hash 取前两个和后一个  中间每兆取前中后三个点
calulateSamplingHash (chunks) {
  return new Promise(resolve => {
    const spark = new Spark.ArrayBuffer()
    const head = chunks.slice(0, 2)
    const tail = chunks[chunks.length - 1]
    const middle = chunks.slice(2, chunks.length - 1)
    const files = []
    files.push(head[0].file, head[1].file)
    middle.forEach(item => {
      const head = item.file.slice(0, 1)
      const tail = item.file.slice(-1, item.file.length)
      const center = Math.floor(item.file.length - 1) / 2
      const middle = item.file.slice(center, center + 1)
      files.push(head, tail, middle)
    })
    files.push(tail.file)
    //追加计算hash
    const reader = new FileReader()
    reader.readAsArrayBuffer(new Blob(files))
    reader.onload = data => {
      spark.append(data.target.result)
      this.hashProgress = 100
      resolve(spark.end())
    }
  })
}
四、上传

将上传的诸多分片都放在对应hash值得目录下面,每次上传前检查下是否有这个文件了
如果有就提示秒传成功
如果没有就读取下这个目录,将这个目录下面的所有文件名都返回给前端

  • 检查文件是否已上传
//检查文件是否已上传
const fileExt = this.fileData.name.split('.').pop()
// uploaded:文件是否已上传,uploadedList:上传的分片列表
const { data: { uploaded, uploadedList } } = await this.$axios.get('/checkFile', {
  params: {
    hash,
    ext: fileExt
  }
})
if (uploaded) {
  this.$message.success('秒传成功')
  return
}
//断点续传  根据之前上传的文件
this.chunks = chunks.map((chunk, index) => {
  const fileName = `${hash}-${index}`
  return {
    file: new File([chunk.file], fileName + '.' + fileExt, { type: 'image/mp4' }),
    name: fileName,
    hash,
    progress: uploadedList.includes(fileName) ? 100 : 0 //如果当前分片已经上传,进度直接设置为100
  }
})
  • 上传请求(断点续传)
//上传请求
async uploadRequest (hash) {
  //如果已经上传过了 就不用上传了  用filter过滤掉(断点续传)
  const requests = this.chunks.map((chunk, index) => {
    if (chunk.progress === 100) {
      return null
    } else {
      const form = new FormData()
      form.append('chunk', chunk.file)
      form.append('hash', chunk.hash)
      form.append('name', chunk.name)
      return { form, index, error: 0 }
    }
  }).filter(val => val)
  //实现并发数控制
  await this.sendRequest(requests)
  //合并上传的分片
  this.mergeFile(hash)
}
  • 并发数控制+错误重试
//请求并发数控制
sendRequest (requests, limit = 3) {
  return new Promise((resolve, reject) => {
    const len = requests.length
    let counter = 0
    let isStop = false //如果一个片段失败超过三次 认为当前网洛有问题 停止全部上传
    const startRequest = async () => {
      if (isStop) return
      const task = requests.shift()
      if (task) {
        //利用try...catch捕获错误
        try {
          //具体的接口  抽离出去了
          await this.launchRequest(task)
          if (counter === len - 1) { //最后一个任务
            resolve()
          } else { //否则接着执行
            counter++
            startRequest() //启动下一个任务
          }
        } catch (error) {
          this.$set(this.chunks[task.index], 'progress', -1)
          //接口报错重试,限制为3次
          if (task.error < 3) {
            task.error++
            requests.unshift(task)
            startRequest()
          } else {
            isStop = true
            reject(error)
          }
        }
      }
    }
    //启动任务
    while (limit > 0) {
      //模拟不同大小启动
      setTimeout(() => {
        startRequest()
      }, Math.random() * 2000)
      limit--
    }
  })
}

完整代码地址(file-vue、file-node)

你可能感兴趣的:(vue实现大文件切片上传、断点续传、并发数控制等)