可以试试这样
前端通过 input type = "file" 接收文件
然后使用文件的 slice 的方法对文件进行分片
将每一片提交到后台依次提交到后台，提交时通过 formData 提交，添加几个字段
(1). 这次上传文件的惟一 id
(2). 上传的状态，是开始，还是上传中，还是上传结束
(3). 分片的位置，比如是第一片，第二片
(4). 分片的数据
后端当接收到一个文件 id 的结束标识时，把对应的分片按位置数据拼接起来就行
<!DOCTYPE html><html><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">var bytesPerPiece = 1024 * 1024// 每个文件切片大小定为1MB . var totalPieces//发送请求 function upload() { var blob = document.getElementById("file").files[0]var start = 0var endvar index = 0var filesize = blob.sizevar filename = blob.name//计算文件切片总数 totalPieces = Math.ceil(filesize / bytesPerPiece)while(start <filesize) { end = start + bytesPerPieceif(end >filesize) { end = filesize} var chunk = blob.slice(start,end)//切割文件 var sliceIndex= blob.name + indexvar formData = new FormData()formData.append("file", chunk, filename)$.ajax({ url: 'http://localhost:9999/test.php', type: 'POST', cache: false, data: formData, processData: false, contentType: false, }).done(function(res){ }).fail(function(res) { })start = endindex++} } </script></body></html>function saveUser() {
var file = document.getElementById("file").files[0]
//原生ajax实现文件上传
var formData = new FormData()
if (file) {
formData.append("file", file)
console.log(file)
}
//得到xhr对象
var xhr = null
if (XMLHttpRequest) {
xhr = new XMLHttpRequest()
} else {
xhr = new ActiveXObject("Microsoft.XMLHTTP")
}
xhr.open("post", "http://www-test.mianyazhu.com/supplier/fileSupplier/file/upload/supplier", true)//设置提交方式，url，异步提交
// xhr.setRequestHeader("Content-Type","multipart/form-data")
xhr.onload = function () {
var data = xhr.responseText //得到返回值
console.log(data)
}
xhr.send(formData)
}
