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的更多相关文章
- vue+element+oss实现前端分片上传和断点续传
纯前端实现: 切片上传 断点续传 .断点续传需要在切上上传的基础上实现 前端之前上传OSS,无需后端提供接口.先上完整代码,直接复制,将new OSS里的参数修改成自己公司OSS相关信息后可用,如遇问 ...
- 阿里云OSS分片上传DEMO
分片传输规则 1.不能超过10000片,2.每片必须大于100KB using System; using System.Collections.Generic; using System.Compo ...
- 30分钟玩转Net MVC 基于WebUploader的大文件分片上传、断网续传、秒传(文末附带demo下载)
现在的项目开发基本上都用到了上传文件功能,或图片,或文档,或视频.我们常用的常规上传已经能够满足当前要求了, 然而有时会出现如下问题: 文件过大(比如1G以上),超出服务端的请求大小限制: 请求时间过 ...
- php实现大文件上传分片上传断点续传
前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...
- PHP大文件分片上传
前段时间做视频上传业务,通过网页上传视频到服务器. 视频大小 小则几十M,大则 1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制:2,请求时间过长, ...
- plupload 大文件分片上传与PHP分片合并探索
最近老大分给我了做一个电影cms系统,其中涉及到一个功能,使用七牛云的文件上传功能.七牛javascript skd,使用起来很方便,屏蔽了许多的技术细节.如果只满足与调用sdk,那么可能工作中也就没 ...
- js+php大文件分片上传
1 背景 用户本地有一份txt或者csv文件,无论是从业务数据库导出.还是其他途径获取,当需要使用蚂蚁的大数据分析工具进行数据加工.挖掘和共创应用的时候,首先要将本地文件上传至ODPS,普通的小文件通 ...
- shutil模块和几种文件上传Demo
一.shutil模块 1.介绍 shutil模块是对os中文件操作的补充.--移动 复制 打包 压缩 解压 2.基本使用 1. shutil.copyfileobj(文件1, 文件2, 长度) 将文件 ...
- 前端利用webuploader实现超大文件分片上传、断点续传
本人在2010年时使用swfupload为核心进行文件的批量上传的解决方案.见文章:WEB版一次选择多个文件进行批量上传(swfupload)的解决方案. 本人在2013年时使用plupload为核心 ...
随机推荐
- linux centos中安装flash player
本机为centos 7.0 64 1.用火狐浏览器随便打开一个视频网站,找到一个视频点进去,网站会提示未安装flash player.点击进去到adobe官网.2.下载flash player插件,可 ...
- 独家!三代Ryzen国行价格来了:12核3999
5月27日,AMD在2019台北电脑展COMPUTEX展前新闻发布会上举行主题演讲,AMD CEO苏姿丰登台,正式发布了第三代Ryzen锐龙处理器,新品共有3款,分别是Ryzen 7 3700X.Ry ...
- 文件I/O编程 (select)
Select的I/O多路转接模型是处理I/O复用的一个高效方法.Select函数语法要点所需头文件: #include<sys/types.h> #include<sys/time. ...
- Stanford CS229 Machine Learning by Andrew Ng
CS229 Machine Learning Stanford Course by Andrew Ng Course material, problem set Matlab code written ...
- 隐马尔可夫模型的前向算法(java实现),今天奉上
隐马尔可夫模型的前向算法(手动实现),今天奉上,由于研究生期间,实现的时候没有多加注释,这里为了让更好的人进入自然语言处理领域,特此,将前向算法奉上,具体公式可参考52nlp的HMN系列博客. 参考了 ...
- java高并发核心要点|系列3|锁的底层实现原理|ABA问题
继续讲CAS算法,上篇文章我们知道,CAS算法底层实现,是通过CPU的原子指令来实现. 那么这里又有一个情景: 话说,有一个线程one从内存位置V中取出A,这时候另一个线程two也从内存中取出A,并且 ...
- 如何使用 vue-cli 3 的 preset 打造基于 git repo 的前端项目模板
vue-cli 之 Preset vue-cli 插件开发指南 TLDR 背景介绍 vue-cli 3 完全推翻了 vue-cli 2 的整体架构设计,所以当你需要给组里定制一份基于 vue-cli ...
- 谈谈对AQS的一些理解
AQS的概念 AQS全称AbstractQueuedSynchronizer,是java并发包中的核心类,诸如ReentrantLock,CountDownLatch等工具内部都使用了AQS去维护锁的 ...
- thinkphp5杂谈--模板
一种新型开源模板 http://www.h-ui.net/H-ui.admin.shtml 下载页面代码 除了curl以外还可以借助 仿站小工具V7.0,操作示意图
- 一个用于格式化和处理数字的javascript库----Numeral.js
npm地址:https://www.npmjs.com/package/numeral 1.转化成百分比: numeral(num).format('0.00%')