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 ...
随机推荐
- JXJJOI2018_三题
这次比赛的话其实还挺满意的,虽然T1 20pts(指的是分数,考试时知道有坑但是考完都没找到的我就知道切不掉这题qwq),T3爆零是在意料之外,不过其实T2贪心能切掉也是意料之外的,所以作此判断.当然 ...
- 使用Xshell进行vi编辑时，按下end、home和Delete不能使用，解决解决办法
使用Xshell连接到Linux进行vi编辑时,进入编辑模式,按下end键,光标无法移到行位,home也不能到行首,其它的Delete键也是不能使用,如何解决? Xshell选项设置如下: 文件→属性 ...
- js join()
在本例中,我们将创建一个数组,然后把它的所有元素放入一个字符串: <script type="text/javascript"> var arr = new Array ...
- 想清楚再入！VR硬件创业能“要你命”
每一次跨时代新产品的出现,总会让科技行业疯狂一阵儿,十年前是智能手机,今天自然是VR.自2015年开始,VR火的越来越让人欣喜,让人兴奋,更让人越来越看不清,越来越害怕.数不清的大小品牌义无反顾的杀入 ...
- resourcequota分析(一)-evaluator-v1.5.2
什么是evaluator 大家都知道,Kubernetes中使用resourcequota对配额进行管理.配额的管理涉及两个步骤:1.计算请求所需要的资源:2.比较并更新配额.所以解读resource ...
- C++走向远洋——20（项目一，三角形，类）
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:sanjiaoxing.cpp * 作者:常轩 * 微信公众号: ...
- 使用HBuilder开发移动APP：开发环境准备(转)
一直想开发个APP玩玩的,但是作为一个PHP码农,需要新学习JAVA或者Object C,这也是一直没能实现这个目标的原因.但是现在HTML5+.APPCAN.apicloud很多工具利用前端技术就能 ...
- Java基础--Java基本数据类型
一.基本数据类型(primitive type) (1)数值型 1.数值型包括整数类型(byte,short,int,long) a.byte :1字节=8bit位 (-128~127) 包装类: ...
- JZOJ 5286. 【NOIP2017提高A组模拟8.16】花花的森林 (Standard IO)
5286. [NOIP2017提高A组模拟8.16]花花的森林 (Standard IO) Time Limits: 1000 ms Memory Limits: 131072 KB Descript ...
- 获取的ajax方法return的返回值的问题解析
今天刚上班就偶遇关于获取Ajax方法return的返回值的问题,这里小记一下. 在使用jquery中,如果获取不到ajax返回值,原因有二: 一.ajax未使用同步 ajax未使用同步,导致数据未加载 ...