go bigfile (文件传输管理系统)前端分片上传demo

BIGFILE Github地址: https://github.com/bigfile/bigfile 欢迎大家前来issue & star 

BIGFILE 中文文档地址https://learnku.com/docs/bigfile/1.0 

BIGFILE基本介绍

Bigfile 是使用 Golang 开发的一个文件传输管理系统,支持通过 HTTP APIRPC 调用以及 FTP 客户端管理文件。它构建于许多优秀的开源项目之上,基于数据库实现了一个虚拟的文件组织系统,在 Bigfile 中您可以看到熟悉的文件夹和文件,这种实现方式也是我们权限控制的基础。在底层,Bigfile 将任何文件切分成 1 MB 的文件块存储, 我们称之为 Chunk ,每个 Chunk 依据 sha256 算法计算 Hash 值相互区分,相同的 Chunk 只会被存储一次。

这里放一个前端http 方式上传文件的demo

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>upload</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <input type="file" name="file" id="file" />
    <button id="upload" onClick="upload()">upload</button>
    <script type="text/javascript">
      function randomString() {
        var chars =
          '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
        var result = ''
        for (var i = 32; i > 0; --i)
          result += chars[Math.floor(Math.random() * chars.length)]
        return result
      }
      function getFileType(filePath) {
        var startIndex = filePath.lastIndexOf('.')
        if (startIndex != -1)
          return filePath.substring(startIndex, filePath.length).toLowerCase()
        else return ''
      }
      var bytesPerPiece = 1024 * 1024 // 每个文件切片大小定为1MB .
      var totalPieces
      //发送请求
      async function upload() {
        var blob = document.getElementById('file').files[0]
        var start = 0
        var end
        var index = 0
        var filesize = blob.size
        var filename = blob.name
        var token = '978f57c67f9c271e3ce78b9f1176aae4'
        var t = new Date()

        //计算文件切片总数
        totalPieces = Math.ceil(filesize / bytesPerPiece)
        let randFileName =
          '/asset/' +
          t.getFullYear() +
          '/' +
          t.getMonth() +
          '/' +
          t.getDate() +
          randomString() +
          getFileType(filename)
        while (start < filesize) {
          end = start + bytesPerPiece
          if (end > filesize) {
            end = filesize
          }
          var chunk = blob.slice(start, end) //切割文件
          var sliceIndex = blob.name + index
          var formData = new FormData()
          formData.append('file', chunk, filename)
          formData.append('path', randFileName)
          formData.append('nonce', randomString())
          formData.append('token', token)
          formData.append('append', start != 0)
          formData.append('size', end - start)

          let res = await $.ajax({
            url: 'http://localhost:10985/api/bigfile/file/create',
            type: 'POST',
            cache: false,
            data: formData,
            processData: false,
            contentType: false
          })
          console.log(res)
          start = end
          index++
        }
      }
    </script>
  </body>
</html>

文件分片方法参考:https://www.cnblogs.com/sghy/p/9143955.html

原文地址:https://www.cnblogs.com/zjhblogs/p/11634567.html