FormData/Go分片/分块文件上传
FormData 接口提供了一种表示表单数据的键值对的构造方式，经过它的数据可以使用 XMLHttpRequest.send() 方法送出，本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data"，它会使用和表单一样的格式。
如果你想构建一个简单的GET请求，并且通过<form>的形式带有查询参数，可以将它直接传递给URLSearchParams。
更多解释MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData
分块(分片，统称分块了，确实只是发送一块数据)文件上传主要分2部分。
1. 前端js用file.slice可以从文件中切出一块一块的数据，然后用FormData包装一下，用XMLHttpRequest把切出来的数据块，一块一块send到server.
2. Server接收到的每一块都是一个multipart/form-data Form表单。可以在表单里放很多附属信息，文件名，大小，块大小，块索引，最总带上这块切出来的二进制数据。
multipart/form-data 数据
POST /upload HTTP/.
Host: localhost:
Content-Length:
User-Agent: Mozilla/. (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.149 Safari/537.36 Content-Type: multipart/form-data; boundary=----WebKitFormBoundarymtng0xrR3ASR7wx7 ------WebKitFormBoundaryHdBeczaB5xBq6d55
Content-Disposition: form-data; name="file_name" apache-maven-..-bin.zip
------WebKitFormBoundaryHdBeczaB5xBq6d55
Content-Disposition: form-data; name="file_size" ------WebKitFormBoundaryHdBeczaB5xBq6d55
Content-Disposition: form-data; name="block_size" ------WebKitFormBoundaryHdBeczaB5xBq6d55
Content-Disposition: form-data; name="total_blocks" ------WebKitFormBoundaryHdBeczaB5xBq6d55
Content-Disposition: form-data; name="break_error" true
------WebKitFormBoundaryHdBeczaB5xBq6d55
Content-Disposition: form-data; name="index" ------WebKitFormBoundaryHdBeczaB5xBq6d55
Content-Disposition: form-data; name="data"; filename="blob"
Content-Type: application/octet-stream
(binary)
在Server存储文件，基本也就2种方案：
1. 直接创建一个对应大小的文件，按照每块数据的offset位置，写进去。
2. 每个传过来的数据块，保存成一个单独的数据块文件，最后把所有文件块合并成文件。
我这里只是做了一份简单的演示代码，基本上是不能用于生产环境的。
Index.html，直接把js写进去了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>Multil-Blocks upload</title>
</head> <body>
<h2>Multil-Blocks upload</h2> <input id="file" type="file" /> <input type="checkbox" id="multil_block_file">multil block file</input>
<button type="button" onclick="on_block_upload()">Block upload</button>
<button type="button" onclick="on_concurrency_upload()">Concurrency upload</button>
<hr/> <div>
<label>File name: </label><span id="file_name"></span>
</div>
<div>
<label>File size: </label><span id="file_size"></span>
</div>
<div>
<label>Split blocks: </label><span id="block_count"></span>
</div> <hr/> <p id="upload_info"></p> <script>
var Block_Size = 1024 * 1024 * 2; var el_file = document.getElementById('file');
var el_multil_block_file = document.getElementById('multil_block_file');
var el_file_name = document.getElementById('file_name');
var el_file_size = document.getElementById('file_size');
var el_block_count = document.getElementById('block_count');
var el_upload_info = document.getElementById('upload_info'); var file = null;
var total_blocks = 0;
var block_index = -1;
var block_index_random_arr = [];
var form_data = null; el_file.onchange = function() {
if (this.files.length === 0) return; file = this.files[0];
total_blocks = Math.ceil( file.size / Block_Size ); el_file_name.innerText = file.name;
el_file_size.innerText = file.size;
el_block_count.innerText = total_blocks;
} function print_info(msg) {
el_upload_info.innerHTML += `${msg}<br/>`;
} function done() {
file = null;
total_blocks = 0;
block_index = -1;
form_data = null; el_file.value = '';
} function get_base_form_data() {
var base_data = new FormData();
base_data.append('file_name', file.name);
base_data.append('file_size', file.size);
base_data.append('block_size', Block_Size);
base_data.append('total_blocks', total_blocks);
base_data.append('break_error', true);
base_data.append('index', 0);
base_data.append('data', null); return base_data
} function build_block_index_random_arr() {
block_index_random_arr = new Array(total_blocks).fill(0).map((v,i) => i);
block_index_random_arr.sort((n, m) => Math.random() > .5 ? -1 : 1); print_info(`Upload sequence: ${block_index_random_arr}`);
} function post(index, success_cb, failed_cb) {
if (!form_data) {
form_data = get_base_form_data();
}
var start = index * Block_Size;
var end = Math.min(file.size, start + Block_Size); form_data.set('index', index);
form_data.set('data', file.slice(start, end)); print_info(`Post ${index}/${total_blocks}, offset: ${start} -- ${end}`); var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload', true);
/*
Browser-based general content types
Content-Type: multipart/form-data; boundary=----WebKitFormBoundarysXH5DIES2XFMuLXL Error content type:
xhr.setRequestHeader('Content-Type', 'multipart/form-data');
Content-Type: multipart/form-data;
*/
xhr.onreadystatechange = function() { if (xhr.readyState === XMLHttpRequest.DONE) { if (xhr.status >= 200 && xhr.status < 300 && success_cb) {
return success_cb();
} if (xhr.status >= 400 && failed_cb) {
failed_cb();
}
}
} // xhr.onerror event
xhr.send(form_data);
} function block_upload() {
if (!file) {
return;
}
if (block_index + 1 >= total_blocks) {
return done();
} block_index++;
var index = block_index_random_arr[block_index]; post(index, block_upload);
} function concurrency_upload() {
if (!file || total_blocks === 0) {
return;
} build_block_index_random_arr(); form_data = get_base_form_data();
form_data.set('break_error', false);
form_data.set('multil_block', el_multil_block_file.checked); for (var i of block_index_random_arr) {
((idx) => {
post(idx, null, function() {
print_info(`Failed: ${idx}`);
setTimeout(() => post(idx), 1000);
});
})(i);
}
} function on_block_upload() {
if (file) {
print_info('Block upload'); form_data = get_base_form_data();
form_data.set('multil_block', el_multil_block_file.checked); build_block_index_random_arr(); block_index = -1;
block_upload();
}
} function on_concurrency_upload() {
if (file) {
print_info('Concurrency upload');
concurrency_upload();
}
}
</script> </body>
</html>
简单的Go server和保存文件，基本忽略所有的错误处理
package main import (
"fmt"
"io/ioutil"
"log"
"net/http"
"os"
"path"
"path/filepath"
"regexp"
"strconv"
"strings"
"syscall"
"text/template"
) type MultilBlockFile struct {
FileName string
Size int64
BlockSize int64
TotalBlocks int
Index int
Bufs []byte
BreakError bool
} func fileIsExist(f string) bool {
_, err := os.Stat(f)
return err == nil || os.IsExist(err)
} func lockFile(f *os.File) error {
err := syscall.Flock(int(f.Fd()), syscall.LOCK_EX|syscall.LOCK_NB)
if err != nil {
return fmt.Errorf("get flock failed. err: %s", err)
} return nil
} func unlockFile(f *os.File) error {
defer f.Close()
return syscall.Flock(int(f.Fd()), syscall.LOCK_UN)
} func singleFileSave(mbf *MultilBlockFile) error { dir, _ := filepath.Abs(filepath.Dir(os.Args[0]))
filePath := path.Join(dir, "tmp", mbf.FileName) offset := int64(mbf.Index) * mbf.BlockSize fmt.Println(">>> Single file save ---------------------")
fmt.Printf("Save file: %s \n", filePath)
fmt.Printf("File offset: %d \n", offset) var f *os.File
var needTruncate bool = false
if !fileIsExist(filePath) {
needTruncate = true
} f, _ = os.OpenFile(filePath, syscall.O_CREAT|syscall.O_WRONLY, 0777) err := lockFile(f)
if err != nil {
if mbf.BreakError {
log.Fatalf("get flock failed. err: %s", err)
} else {
return err
}
} if needTruncate {
f.Truncate(mbf.Size)
} f.WriteAt(mbf.Bufs, offset) unlockFile(f) return nil
} func multilBlocksSave(mbf *MultilBlockFile) error {
dir, _ := filepath.Abs(filepath.Dir(os.Args[0]))
tmpFolderPath := path.Join(dir, "tmp")
tmpFileName := fmt.Sprintf("%s.%d", mbf.FileName, mbf.Index)
fileBlockPath := path.Join(tmpFolderPath, tmpFileName) f, _ := os.OpenFile(fileBlockPath, syscall.O_CREAT|syscall.O_WRONLY|syscall.O_TRUNC, 0777)
defer f.Close() f.Write(mbf.Bufs)
f.Close() re := regexp.MustCompile(`(?i:^` + mbf.FileName + `).\d$`) files, _ := ioutil.ReadDir(tmpFolderPath)
matchFiles := make(map[string]bool) for _, file := range files {
if file.IsDir() {
continue
} fname := file.Name()
if re.MatchString(fname) {
matchFiles[fname] = true
}
} if len(matchFiles) >= mbf.TotalBlocks {
lastFile, _ := os.OpenFile(path.Join(tmpFolderPath, mbf.FileName), syscall.O_CREAT|syscall.O_WRONLY, 0777)
lockFile(lastFile) lastFile.Truncate(mbf.Size) for name := range matchFiles {
tmpPath := path.Join(tmpFolderPath, name) idxStr := name[strings.LastIndex(name, ".")+1:]
idx, _ := strconv.ParseInt(idxStr, 10, 32) fmt.Printf("Match file: %s index: %d \n", name, idx) data, _ := ioutil.ReadFile(tmpPath) lastFile.WriteAt(data, idx*mbf.BlockSize) os.Remove(tmpPath)
}
unlockFile(lastFile)
} return nil
} func indexHandle(w http.ResponseWriter, r *http.Request) {
tmp, _ := template.ParseFiles("./static/index.html")
tmp.Execute(w, "Index")
} func uploadHandle(w http.ResponseWriter, r *http.Request) { var mbf MultilBlockFile
mbf.FileName = r.FormValue("file_name")
mbf.Size, _ = strconv.ParseInt(r.FormValue("file_size"), 10, 64)
mbf.BlockSize, _ = strconv.ParseInt(r.FormValue("block_size"), 10, 64)
mbf.BreakError, _ = strconv.ParseBool(r.FormValue("break_error")) var i int64
i, _ = strconv.ParseInt(r.FormValue("total_blocks"), 10, 32)
mbf.TotalBlocks = int(i) i, _ = strconv.ParseInt(r.FormValue("index"), 10, 32)
mbf.Index = int(i) d, _, _ := r.FormFile("data")
mbf.Bufs, _ = ioutil.ReadAll(d) fmt.Printf(">>> Upload --------------------- \n")
fmt.Printf("File name: %s \n", mbf.FileName)
fmt.Printf("Size: %d \n", mbf.Size)
fmt.Printf("Block size: %d \n", mbf.BlockSize)
fmt.Printf("Total blocks: %d \n", mbf.TotalBlocks)
fmt.Printf("Index: %d \n", mbf.Index)
fmt.Println("Bufs len:", len(mbf.Bufs)) multilBlockFile, _ := strconv.ParseBool(r.FormValue("multil_block")) var err error
if multilBlockFile {
err = multilBlocksSave(&mbf)
} else {
err = singleFileSave(&mbf)
} if !mbf.BreakError && err != nil {
w.WriteHeader(400)
fmt.Fprintf(w, fmt.Sprintf("%s", err))
return
} fmt.Fprintf(w, "ok")
} func main() {
println("Listen on 8080") http.HandleFunc("/", indexHandle)
http.HandleFunc("/upload", uploadHandle) log.Fatal(http.ListenAndServe(":8080", nil))
}
目录截图，比较乱来
FormData/Go分片/分块文件上传的更多相关文章
- 利用Formdata实现form提交文件上传不跳转页面
作者:幻月九十链接:https://www.zhihu.com/question/19631256/answer/119911045来源:知乎著作权归作者所有,转载请联系作者获得授权. $('form ...
- 使用PHP和HTML5 FormData实现无刷新文件上传教程
无刷新文件上传是一个常见而又有点复杂的问题,常见的解决方案是构造 iframe 方式实现. 在 HTML5 中提供了一个 FormData 对象 API,通过 FormData 可以方便地构造一个表单 ...
- FormData+Ajax 实现多文件上传 学习使用FormData对象
FormData对象是为序列化表以及创建与表单格式相同的数据(当然是用于XHR传输)提供便利. 今天我们使用dropzone和FormData实现多文件上传功能. var SAMP = null; / ...
- FormData序列化及file文件上传
表单数据上传 情况一: 一.当表单文件处于无任何处理状态时,用submit提交直接上传; 但这种方式上传,数据无任何处理:(极少使用): 但是传统的表单提交会导致页面刷新,但是有些情况下,我们并不希望 ...
- 传统表单提交文件上传，以及FormData异步ajax上传文件
传统的文件上传: 只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单. 以下是另一种方式FormData,有时候我们需要ajax ...
- Java结合WebUploader文件上传
之前自己写小项目的时候也碰到过文件上传的问题,没有找到很好的解决方案.虽然之前网找各种解决方案的时候也看到过WebUploader,但没有进一步深究.这次稍微深入了解了些,这里也做个小结. 简单的文件 ...
- PHP中使用 TUS 协议来实现可恢复文件上传
曾经尝试过用PHP上传大文件吗?想知道您是否可以从上次中断的地方继续上传,而不会在遇到任何中断的情况下再次重新上传整个数据?如果您觉得这个场景很熟悉,请接着往下阅读. 文件上传是我们几乎所有现代Web ...
- PHP简单文件上传
一个简单的PHP上传文件的例子: upload.html <html> <body> <form action="upload.php" method ...
- Spring MVC使用commons fileupload实现文件上传功能
通过Maven建立Spring MVC项目,引入了Spring相关jar依赖. 1.为了使用commons fileupload组件,需要在pom.xml中添加依赖: <properties&g ...
随机推荐
- Selenium自动化测试实例-基于python
一.Selenium介绍 Selenium是一个Web开源自动化测试框架,具有页面级操作.模拟用户真实操作.API从系统层面触发事件等特点. 1．版本 Selenium 1.0 Sever/Clie ...
- WiredTiger运行时参数优化
MongoDB的WiredTiger存储引擎,用了一段时间,遇到了一些问题,通过优化WT参数,也解决了一些问题,做个小结. cache_size 指定WT存储引擎内部cache的内存用量上限. 需要注 ...
- 疫情期，如何用A/B测试快速迭代你的产品？
作者:友盟+数据科学家 杨玉莲.陆子骏 冠状病毒来袭牵动着每个人的心,但是病毒影响的不仅仅是我们的健康,也以极快的速度极深远地影响了整个移动互联网的发展.主流阵地原本在线下的需求,如医疗和生鲜电商,快 ...
- ZYNQ自定义AXI总线IP应用——PWM实现呼吸灯效果
一.前言 在实时性要求较高的场合中,CPU软件执行的方式显然不能满足需求,这时需要硬件逻辑实现部分功能.要想使自定义IP核被CPU访问,就必须带有总线接口.ZYNQ采用AXI BUS实现PS和PL之间 ...
- NSURLSession的前世今生
系统网络框架架构图 前世-NSURLConnection NSURLConnection是苹果提供的原生网络访问类,已经有10多年的历史了,它从 iOS 2.0 开始,一直到iOS9被废弃.异步方法在 ...
- Aajx
# Ajax入门及基本开发 ## # Ajax的基本概念 >> 概念: 界面异步传输技术: 将几种技术和在一起进行开发的一种编程方式: >> 基本应用场景: > Goog ...
- js获取当前日期是一年中的第几天
js获取当前日期为一年中的第几天 const currentYear = new Date().getFullYear().toString(); // 今天减今年的第一天(xxxx年01月01日) ...
- Flask架构管理及特点（重要）
正文 程序包结构 ——————————————————————————————————flask文件夹结构 其中:app为程序包,Flask程序保存在这个包中migrations文件夹包含数据库迁移脚 ...
- python+opencv->边缘提取与各函数参数解析
前情提要:作为刚入门机器视觉的小伙伴,第一节课学到机器视觉语法时觉得很难理解, 很多人家的经验,我发现都千篇一律,功能函数没解析,参数不讲解,就一个代码,所以在此将搜集的解析和案例拿出来汇总!!! 一 ...
- 05 JPAUtil工具类
public final class JPAUtil { // JPA的实体管理器工厂:相当于Hibernate的SessionFactory private static EntityManager ...