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 ...
随机推荐
- 由生到死10个月！做App中的“二”有多难
十月,原本是怀胎过程的喜悦时光,但这段个时光,如今却是绝大多数App从生到死的所有时间.在App市场表面形式一片大好,彻底主宰我们生活.工作.娱乐的当下,绝大多数用户只是在App海洋中只取一瓢饮,其他 ...
- 吴裕雄--天生自然 PYTHON语言数据分析：ESA的火星快车操作数据集分析
import os import numpy as np import pandas as pd from datetime import datetime import matplotlib imp ...
- CoreGraphic
public func UIGraphicsBeginImageContextWithOptions( size: CGSize, opaque: Bool, _ scale: CGFloat) si ...
- create view and switch view
pageView扩展backbone cAbstractApp定义view加载.切换.回退.跳转-webApp/cWebViewApp/hybirdApp为其子类 1.cWebApp扩展了父类的bin ...
- 等效燃油消耗ECMS与庞德里亚金最小值原理PMP中协同状态的关系
今儿阅读了一篇文献——<车联网环境下并联混合动力客车控制策略优化研究>,是北理的博士所写的,内容比较翔实.主要是里面的关于ECMS和庞德里亚金最小值原理(PMP)的关系推导很让人印象深刻, ...
- Hibernate入门之主键生成策略详解
前言 上一节我们讲解了Hibernate命名策略,从本节我们开始陆续讲解属性.关系等映射,本节我们来讲讲主键的生成策略. 主键生成策略 JPA规范支持4种不同的主键生成策略(AUTO.IDENTITY ...
- C++走向远洋——47（第十二周、运算符重载基础程序、阅读）
*/ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:text.cpp * 作者:常轩 * 微信公众号:Worldhe ...
- 达拉草201771010105《面向对象程序设计（java）》第十四周学习总结
达拉草201771010105<面向对象程序设计(java)>第十四周学习总结 第一部分:理论知识 布局管理器: 布局管理器是一组类. 实现java.awt.LayoutManager接口 ...
- 连接器巨头Molex莫仕：替代品厂PK原厂
序言:在中国电子产业,原厂PK替代品厂一直是一个极具话题性.美国在贸易战背景下,挤压中国的发展空间,迫使这一类企业要觉醒.当然受影响的不止中国电子企业,美国电子企业也一样. 在连接器这一领域,Mole ...
- Docker深入浅出系列 | Docker Compose多容器实战
目录 前期准备 Docker Compose是什么 为什么要用Docker Compose Docker Compose使用场景 Docker Compose安装 Compose Yaml文件结构 C ...