Howdy
theme-lighttheme-dark

断点续传与个人网盘系统的前后端设计

May 05, 2020

功能设计

  1. 登录鉴权:进入系统必须先登录,未登录无法访问到后端接口与网盘的静态资源
  2. 上传:断点续传、文件秒传
  3. 文件分享:生成一个随机密钥字符串与一个资源访问地址,输入密钥验证成功即可访问到该资源,密钥会在一定时间内过期
  4. 回收站:删除后的文件默认先保留在回收站,7天后自动删除
  5. 文件操作: 新建文件夹、重命名、移动、删除、批量删除

技术选型

  • 前端:使用Vue构建,使用ElementUI构建UI,使用vue-simple-uploader插件实现上传的断点续传、文件秒传功能。
  • 后端:使用Koa实现,直接使用Koa搭建静态资源服务器(即个人网盘资源目录),加入静态资源鉴权,使用原生Nodejs处理文件管理与上传功能。

问题与思考

Q:是否需要使用数据库,将文件信息保存到数据库中?

原则上,文件的增删查改都将使用原生nodejs进行操作,这些都不需要使用到数据库。但是原生nodejs并不能直接读取到文件的MD5值,在断点续传与秒传功能中就无法通过传来的MD5标识跟本地的文件进行匹配。所以还是需要建立一个含文件MD5、文件路径等信息的数据表记录本地文件的MD5。

Q:若使用了数据库记录文件MD5信息,怎么保证数据表的数据与本地物理存储是同步的?

如果进行文件操作并不是通过该文件管理系统,而是直接在windows上进入到网盘目录进行文件增删改,这时我们的应用是无法监听到文件的变更的,数据表数据并不会更新。这样就会出现我把某个文件删除了,但是数据表仍然记录了该文件是已经上传的情况。

原本是想采用使用定时器定时对本地文件与数据表进行数据同步,但是发现这样在后期文件多或嵌套深的情况下性能会很差,这种方式并不合适。

由于这些信息只是在文件断点续传与秒传功能中需要用到,后面采用的方案为:直接在预探请求中先判断数据库信息是否与本地物理存储相符,如果不相符则认为本地已不存在,需要重新上传。(原则上是不推荐直接使用windows进入目录进行文件操作,而是都通过这个文件管理系统进行文件操作)

Q: 同一个文件,但存在于网盘不同目录下,同时在不同目录删除该文件,回收站中是否会冲突?

删除文件时,使用原文件名+时间(yyyy-MM-dd HH:mm:ss)进行重命名后再移动文件到回收站。同时需要往数据库记录文件删除的信息,删除前的文件路径与删除时间等,以便实现文件还原与回收站定时清理的功能。

Q:文件夹并无MD5值,删除文件夹如何确保可以还原?

删除文件夹与删除文件属于同样的操作,也是通过文件夹名+时间重命名后移动到回收站目录。但是数据库中需要使用一个新的数据表记录文件夹的删除信息。

实现

文件鉴权

登录时保留session, 然后使用一个中间件鉴权,如果没有session则不允许访问系统除登录接口外的其他任何请求,包括静态资源。使用koa-static构建静态资源服务器,并将defer属性设置为true,让它允许通过鉴权中间件。

// ...
app.use(async (ctx, next) => {
  if (ctx.url.includes('/storage') && ctx.url !== '/storage/login') {
    if (!ctx.session.isLogin) {
      ctx.body = r.loginError()
      return
    }
  }
  await next()
})

// ...
app.use(static(__dirname + '/public', {
  defer: true
}))

// ...
const router = new Router({
  prefix: '/storage'
})

// ...
router.post('/login', async ctx => {
  const { access } = ctx.request.body
  if (!access) {
    ctx.body = r.parameterError()
    return
  }
  try {
    const base64Decode = new Buffer.from(access, 'base64')
    const genAccess = base64Decode.toString()
    if (storageRootKey !== genAccess) {
      ctx.body = r.error(311, '密码错误')
      return
    }
    ctx.session.isLogin = true
    logger('登入Storage')
    ctx.body = r.success()
  } catch (e) {
    ctx.body = r.error(310, '登录失败')
  }
})

这里设置的文件系统接口为storage/*,静态资源服务器为public/storage,登录时前后端会把密码进行简单base64转码。

若未登录直接访问静态资源,则回返回错误信息。

未登录直接访问 未登录

登录后在访问 已登录

断点续传与文件秒传

文件md5计算

实现断点续传与文件秒传的前提是需要确定出文件的唯一标识,最好的方式是计算出文件的md5值。

由于选择的vue-simple-uploader没有直接提供文件md5计算的api,因此需要手动实现。这里采用spark-md5插件计算文件的md5,在file-added事件中,直接用fileReader读取文件,根据每个切片循环算出md5。

注意尽量不要直接一次读取整个文件的md5,直接读取大文件在IE浏览器中有可能会出现卡死的情况,遍历读取每个切片可以减轻浏览器计算压力。

methods: {
  hanldeFileAdd (file) {
    const fileList = this.$refs.uploader.files
    const index = fileList.findIndex(item => item.name === file.name)
    if (~index) {
      file.removeFile(file)
    } else {
      file.targetPath = this.currentPath
      this.computeMD5(file)
    }
  },
  computeMD5 (file) {
    const fileReader = new FileReader()
    const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
    let currentChunk = 0
    const chunkSize = CHUNK_SIZE
    const chunks = Math.ceil(file.size / chunkSize)
    const spark = new SparkMD5.ArrayBuffer()
    this.$nextTick(() => {
      this.createMD5Element(file)
    })
    loadNext()
    fileReader.onload = e => {
      spark.append(e.target.result)
      if (currentChunk < chunks) {
        currentChunk++
        loadNext()
        this.$nextTick(() => {
          this.setMD5ElementText(file, `校验MD5 ${((currentChunk / chunks) * 100).toFixed(0)}%`)
          document.querySelector(`.uploader-list .file-${file.id} .uploader-file-actions`).style.display = 'none'
        })
      } else {
        const md5 = spark.end()
        file.uniqueIdentifier = md5
        file.resume()
        this.destoryMD5Element(file)
        document.querySelector(`.uploader-list .file-${file.id} .uploader-file-actions`).style.display = 'block'
      }
    }
    fileReader.onerror = function () {
      this.$nextTick(() => {
        this.setMD5ElementText(file, '校验MD5失败')
      })
      file.cancel()
    }
    function loadNext () {
      const start = currentChunk * chunkSize
      const end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize
      fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end))
    }
  },
  createMD5Element (file) {
    this.$nextTick(() => {
      const el = document.querySelector(`.uploader-list .file-${file.id} .uploader-file-status`)
      const MD5Status = document.createElement('div')
      MD5Status.setAttribute('class', 'md5-status')
      el.appendChild(MD5Status)
    })
  },
  destoryMD5Element (file) {
    this.$nextTick(() => {
      const el = document.querySelector(`.uploader-list .file-${file.id} .uploader-file-status .md5-status`)
      if (el) {
        el.parentNode.removeChild(el)
      }
    })
  },
  setMD5ElementText (file, text) {
    const el = document.querySelector(`.uploader-list .file-${file.id} .uploader-file-status .md5-status`)
    if (el) {
      el.innerText = text
    }
  }
}

将计算完的MD5直接替换到file对象的uniqueIdentifier属性上,最终发送的请求中的identifier将是文件的MD5,后端通过该字段进行识别。

Vue-simple-uploader文件列表状态需要加入计算MD5相关状态,可以通过css为原文件列表增加多一层md5状态层,然后通过相关事件进行显隐。

md5-status

断点续传

默认Vue-simple-uploader提供了文件上传时的暂停/开始操作,你可以在上传过程中随时暂停。但是这个并不是真正的断点续传,因为页面刷新后,上传状态并没有保存下来,仍会重新从第一片重新上传。若将状态保留到localstorage中,仍是不太现实的,最好的方式是由后端返回是否需要当前这个切片,因为后端能知道当前该文件已上传的切片。

testChunks属性设为true(默认)时,每个切片会先发送一个不含文件流的预探get请求给后端,通过后端返回的http状态码(可更改)判断该切片是否需要发送。

默认每个切片都会发送一个预探请求,这样假如一个10个切片的文件就会产生20个请求,造成浪费。最理想的情况是预探请求只发送一个。新版simple-uplder也考虑到这点,并提供了checkChunkUploadedByResponse属性,可以将预探请求设置为一个,后端为这个预探请求直接返回当前已经有的切片数组,然后前端直接判断切片请求是否需要发送。

例:文件上传到一半,点了暂停,然后刷新网页,再重新上传。文件校验完Md5后,预探请求返回已存在的切片数组[1~25],然后真正切片请求会直接从第26片开始上传。

续传

前端处理

// 前端vue-simple-uploader配置项
options: {
  target: (instance, chunk, isTest) => isTest ? '/api/storage/testUpload' : '/api/storage/upload',  query: () => {
    return {
      targetPath: this.currentPath
    }
  },
  chunkSize: CHUNK_SIZE,
  allowDuplicateUploads: false,
  checkChunkUploadedByResponse: (chunk, message) => {
    const response = JSON.parse(message)
    const existChunk = response.data.map(item => ~~item)
    return existChunk.includes(chunk.offset + 1)  }
}

其中/storage/testUpload为预探请求(get),storage/upload为真正切片上传请求(post)。checkChunkUploadedByResponse控制只上传后端不存在的切片。

后端处理

router.get('/testUpload', async ctx => {
  const { identifier, filename, targetPath = '$Root', totalChunks } = ctx.query
  const chunkFolderURL = `${storageChunkPath}/${identifier}`
  try {
    const checkExistResult = await query(`select * from storage where id = ? and isComplete = 1 and isDel = 0`, identifier)
    // 检查是否已经完整上传过该文件
    if (checkExistResult.length > 0) {
      let { fullPath } = checkExistResult[0]
      let realPath = fullPath.replace('$Root', storageRootPath)
      // 检查当前DB信息是否与物理存储相符
      if (fs.existsSync(realPath)) {
        // 检查目标位置是否与之前上传的位置一样,不一致则复制过去
        let targetFilePath = `${targetPath}/${filename}`
        if (fullPath !== targetFilePath) {
          targetFilePath = targetFilePath.replace('$Root', storageRootPath)
          fs.copyFileSync(realPath, targetFilePath)
        }
        // 返回全部分片数组
        const chunksArr = Array.from({ length: totalChunks }, (item, index) => index + 1)        ctx.body = r.successData(chunksArr)
        return
      }
    }
    if (!fs.existsSync(chunkFolderURL)) {
      fs.mkdirSync(chunkFolderURL, { recursive: true })
      const now = DateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
      const sql = `replace into storage(id, fullPath, updatedTime, isComplete, isDel) values(?, ?, ?, 0, 0)`
      await query(sql, [identifier, `${targetPath}/${filename}`, now])
      ctx.body = r.successData([])
    } else {
      const ls = fs.readdirSync(chunkFolderURL)
      ctx.body = r.successData(ls)
    }
  } catch (e) {
    ctx.status = 501
    ctx.body = r.error(306, e)
  }
})

router.post('/upload', async ctx => {
  const { chunkNumber, identifier, filename, totalChunks, targetPath = '$Root' } = ctx.request.body
  const { file } = ctx.request.files
  const chunkFolderURL = `./public/storage-chunk/${identifier}`
  const chunkFileURL = `${chunkFolderURL}/${chunkNumber}`
  if (chunkNumber !== totalChunks) {
    const reader = fs.createReadStream(file.path)    const upStream = fs.createWriteStream(chunkFileURL)    reader.pipe(upStream)    ctx.body = r.success()
  } else {
    const targetFile = `${targetPath}/${filename}`.replace('$Root', storageRootPath)
    fs.writeFileSync(targetFile, '')
    try {
      for (let i = 1; i <= totalChunks; i++) {
        const url = i == totalChunks ? file.path : `${chunkFolderURL}/${i}`
        const buffer = fs.readFileSync(url)
        fs.appendFileSync(targetFile, buffer)
      }
      const now = DateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
      const sql = `update storage set isComplete = 1, updatedTime = ? where id = ?`
      await query(sql, [now, identifier])
      ctx.body = r.success()
      deleteFolder(chunkFolderURL)
      logger('文件上传成功', 1, `targetFile: ${targetFile}, MD5:${identifier}, 切片源删除成功`)
    } catch (e) {
      ctx.status = 501
      ctx.body = r.error(501, e)
      logger('文件合并失败', 0, `分片丢失 => ${e}`)
      fs.unlinkSync(targetFile)    }
  }
})

在testUpload请求中,通过数据库与本地切片生成已存在的切片数组给前端,若从未传过还需要更新数据库记录。

在upload请求中,对每个切片使用nodejs管道流进行读写,将文件保留在chunk文件夹中,并以md5值为文件名,存放目标文件的切片。当遇到最后一个切片时,执行合并文件操作(需要注意,最后一个切片由于流未关闭,这个时刻最后一个切片文件是还没保存到本地,只是可以直接读取临时文件)。合并文件完成后,删除切片文件夹,并更新数据库信息,记录该文件已经完成。

切片存放

当上传一个本地已经存在的文件时,由于数据库记录了该md5文件是已经完成的,所以预探请求会返回全部切片数组,前端就不会再发送upload请求从而实现了文件秒传。即使上传的目标目录与本地已存在文件处在不同目录,在预探请求时识别到时,也会进行复制操作,前端也不需要再传。

断点续传演示 断点续传

上传过程暂停,然后刷新页面,重新上传同一个文件,可以发现文件是从上传暂停的地方重新开始。

文件秒传演示 文件秒传

上传上面演示的同一个文件,由于发现是已经存在的文件,则会直接返回成功。

至此,一个断点续传、秒传功能的前后端都实现完了。

另外该系统还有一些对文件进行移动、删除、下载的功能都是比较简单的,基本都是使用nodejs的fs模块就能实现,这里就不细说了。

该系统前端Git: https://github.com/leon-kfd/FileSystem

由于目前该后端是嵌入到了本人的其他系统里面,还未能开源,等有空会整理出一份。同时系统部分功能由于时间问题也还没有空去完善,望见谅。


to-top