关键字
antd 分片上传
html 文件api
前端大文件上传
阿里云 分片上传oss
https://help.aliyun.com/document_detail/84786.html
引用 https://segmentfault.com/q/1010000009304154/a-1020000010137079
-
如果文件较小，直接使用antd自带的upload
-
如果文件过大，需要把upload的beforeUploa的设定为false
-
之后进行文件切块处理，参考链接：https://www.genban.org/teach/teach-17154.html
简书
谈一谈大文件上传——前台分片和后台合并
https://www.jianshu.com/p/bfaad1323a4c
掘金
用JavaScript和Node.js实现文件分片上传
https://juejin.im/post/5db29beb5188256467245a7b
「HTML5」FileAPI 文件操作实战
https://juejin.im/post/5d35af63e51d454fa33b199e
结合element-ui 的el-upload组件支持分片上传el-upload-piecess
https://juejin.im/post/5b9b6e81f265da0ab2281ae0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<input type="file" id="file" />
<br />
<button id="upload">上传</button>
<br />
<span id="output" style="font-size:12px">等待</span>
</body>
<script>
var page = {
init: function () {
$("#upload").click($.proxy(this.upload, this));
},
upload: function () {
var file = $("#file")[0].files[0], //文件对象
name = file.name, //文件名
size = file.size, //总大小
succeed = 0;
console.log(file)
var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
shardCount = Math.ceil(size / shardSize); //总片数
for (var i = 0; i < shardCount; ++i) {
//计算每一片的起始与结束位置
var start = i * shardSize,
end = Math.min(size, start + shardSize);
//构造一个表单，FormData是HTML5新增的
var form = new FormData();
form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分
form.append("name", name);
form.append("total", shardCount); //总片数
form.append("index", i + 1); //当前是第几片
//Ajax提交
$.ajax({
url: "http://192.168.0.160:3000/mock/130/admin/user_group/getList",
type: "POST",
data: form,
async: true, //异步
processData: false, //很重要，告诉jquery不要对form进行处理
contentType: false, //很重要，指定为false才能形成正确的Content-Type
success: function () {
++succeed;
$("#output").text(succeed + " / " + shardCount);
}
}) //Ajax提交
} // end for
} // end func
}
page.init();
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="jquery-3.4.1.min.js"></script>
</head>
<body>
<input type="file" id="file" />
<br />
<button id="upload">上传</button>
<br />
<span id="output" style="font-size:12px">等待</span>
</body>
<script>
var page = {
init: function () {
$("#upload").click($.proxy(this.upload, this));
},
upload: function () {
var file = $("#file")[0].files[0], //文件对象
name = file.name, //文件名
size = file.size, //总大小
succeed = 0;
console.log(file)
var shardSize = 2 * 1024 * 1024, //以2MB为一个分片
shardCount = Math.ceil(size / shardSize); //总片数
for (var i = 0; i < shardCount; ++i) {
//计算每一片的起始与结束位置
var start = i * shardSize,
end = Math.min(size, start + shardSize);
//构造一个表单，FormData是HTML5新增的
var form = new FormData();
form.append("data", file.slice(start, end)); //slice方法用于切出文件的一部分
form.append("name", name);
form.append("total", shardCount); //总片数
form.append("index", i + 1); //当前是第几片
//Ajax提交
$.ajax({
url: "http://192.168.0.160:3000/mock/130/admin/user_group/getList",
type: "POST",
data: form,
async: true, //异步
processData: false, //很重要，告诉jquery不要对form进行处理
contentType: false, //很重要，指定为false才能形成正确的Content-Type
success: function () {
++succeed;
$("#output").text(succeed + " / " + shardCount);
}
}) //Ajax提交
} // end for
} // end func
}
page.init();
</script>
</html>