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

Posted 2023-01-03 zjhblogs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了go bigfile （文件传输管理系统）前端分片上传demo相关的知识，希望对你有一定的参考价值。

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

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

BIGFILE基本介绍

Bigfile 是使用 Golang 开发的一个文件传输管理系统，支持通过 HTTP API，RPC 调用以及 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

以上是关于go bigfile （文件传输管理系统）前端分片上传demo的主要内容，如果未能解决你的问题，请参考以下文章