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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM