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

时间:2023-03-10 06:12:52
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