zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    leaflet之自定义marker Icon
    Geoserver系列教程
    leaflet教程
    浏览器缓存详解:expires,cache-control,last-modified,etag详细说明
    给自己,这周一个任务,完成一个组件化的图片轮播效果
    撩课-Java每天10道面试题第4天
    撩课-Java每天10道面试题第3天
    撩课-Java每天10道面试题第2天
    撩课-Java每天10道面试题第1天
    撩课-Mysql详解第3部分sql分类
  • 原文地址:https://www.cnblogs.com/zjhblogs/p/11634567.html
Copyright © 2011-2022 走看看