Recently meet the needs of a need to upload large files hundreds of megabytes, research and Tencent seven cattle cloud slice segments upload function, so in this front-end finishing large file upload relevant functions.
In some businesses, large file uploads is a more important interaction scenarios, such as uploading large storage Excel spreadsheet data, upload audio and video files. If the file size is relatively large, or network conditions are poor, the upload time will be longer (more packets to be transmitted, retransmitted packet loss probability is greater), the user can not refresh the page, you can only wait request is complete .
Starting from the following file uploads, organize your thoughts upload large files, and gives the relevant code examples, due to the built-in PHP is quite easy file splitting and splicing methods, so the service side code examples written using PHP.
Sample code for this article is on github, primary reference
Large file uploads talk
Cutting large file uploads
Upload files in several ways
First we look at several ways to upload files.
Common form to upload
Use PHP to show the conventional form upload is a good choice. First build file upload form, submit the form and specify the type of content that is enctype = "multipart / form-data", indicates that the form will need to upload binary data.
Then write index.php upload files receive code, you can use move_uploaded_file method (php Dafa is good ...)
form when the form to upload large files, it is easy to meet the problem server timeout. By XHR, the front end can also upload files asynchronously, usually by two ideas.
Upload file encoding
The first idea is to encode the file, and then decoded at the server, wrote achieve picture compression before uploading the blog at the front end, to achieve its main principle is to convert the picture into base64 passed
varimgURL = URL.createObjectURL(file);
ctx.drawImage(imgURL, 0, 0);
// get the encoding of the picture, then the picture as a very long string passed
vardata= canvas.toDataURL( "image/jpeg", 0.5);
In the server needs to be done is relatively simple, first decoding base64, and then save the image to
$imgData = $_REQUEST[ 'imgData'];
$base64 = explode( ',', $imgData)[ 1];
$img = base64_decode($base64);
$url = './test.jpg';
if(file_put_contents($url, $img)) {
exit(json_encode( array(
url => $url
)));
}
base64 disadvantage in that a larger volume of encoding (as Base64 three bytes is converted into four bytes, and therefore the encoded text, will present a large ratio of about one third of its original language) than the original image, for large volume the files, uploading and parsing time will be significantly increased.
More knowledge about base64, refer to Base64 notes.
In addition to the base64 encoding, the contents of the file can also be read directly at the front end uploaded in binary format
// read binary files
functionreadBinary(text){
vardata = newArrayBuffer(text.length);
varui8a = newUint8Array(data, 0);
for( vari = 0; i < text.length; i++){
ui8a[i] = (text.charCodeAt(i) & 0xff);
}
console.log(ui8a)
}
varreader = newFileReader;
reader. = function{
readBinary (this.result) // read the result directly or upload
}
// the contents of the file read from the input, the result put in the field fileReader
reader.readAsBinaryString(file);
formData异步上传
FormData对象主要用来组装一组用 发送请求的键/值对，可以更加灵活地发送Ajax请求。可以使用FormData来模拟表单提交。
letfiles = e.target.files // 获取input的file对象
letformData = newFormData;
formData.append( 'file', file);
axios.post(url, formData);
服务端处理方式与直接form表单请求基本相同。
iframe无刷新页面
在低版本的浏览器（如IE）上，xhr是不支持直接上传formdata的，因此只能用form来上传文件，而form提交本身会进行页面跳转，这是因为form表单的target属性导致的，其取值有
_self，默认值，在相同的窗口中打开响应页面
_blank，在新窗口打开
_parent，在父窗口打开
_top，在最顶层的窗口打开
framename，在指定名字的iframe中打开
如果需要让用户体验异步上传文件的感觉，可以通过framename指定iframe来实现。把form的target属性设置为一个看不见的iframe，那么返回的数据就会被这个iframe接受，因此只有该iframe会被刷新，至于返回结果，也可以通过解析这个iframe内的文本来获取。
functionupload{
varnow = + newDate
varid = 'frame'+ now
$( "body").append( `<iframe style="display:none;" name="${id}" id="${id}" />`);
var$form = $( "#myForm")
$form.attr({
"action": '/index.php',
"method": "post",
"enctype": "multipart/form-data",
"encoding": "multipart/form-data",
"target": id
}).submit
$( "#"+id).on( "load", function{
varcontent = $( this).contents.find( "body").text
try{
vardata = JSON.parse(content)
} catch(e){
console.log(e)
}
})
}
大文件上传
现在来看看在上面提到的几种上传方式中实现大文件上传会遇见的超时问题，
表单上传和iframe无刷新页面上传，实际上都是通过form标签进行上传文件，这种方式将整个请求完全交给浏览器处理，当上传大文件时，可能会遇见请求超时的情形
通过fromData，其实际也是在xhr中封装一组请求参数，用来模拟表单请求，无法避免大文件上传超时的问题
编码上传，我们可以比较灵活地控制上传的内容
大文件上传最主要的问题就在于：在同一个请求中，要上传大量的数据，导致整个过程会比较漫长，且失败后需要重头开始上传。试想，如果我们将这个请求拆分成多个请求，每个请求的时间就会缩短，且如果某个请求失败，只需要重新发送这一次请求即可，无需从头开始，这样是否可以解决大文件上传的问题呢？
综合上面的问题，看来大文件上传需要实现下面几个需求
支持拆分上传请求(即切片)
支持断点续传
支持显示上传进度和暂停上传
接下来让我们依次实现这些功能，看起来最主要的功能应该就是切片了。
文件切片
参考： 大文件切割上传
编码方式上传中，在前端我们只要先获取文件的二进制内容，然后对其内容进行拆分，最后将每个切片上传到服务端即可。
在Java中，文件FIle对象是Blob对象的子类，Blob对象包含一个重要的方法slice，通过这个方法，我们就可以对二进制文件进行拆分。
下面是一个拆分文件的示例，对于up6来说开发者不需要关心拆分的细节，由控件帮助实现，开发者只需要关心业务逻辑即可。
控件上传的时候会为每一个文件块数据添加相关的信息，开发者在服务端接收到数据后可以自已进行处理。
服务器接收到这些切片后，再将他们拼接起来就可以了，下面是PHP拼接切片的示例代码
对于up6来说，开发人员不需要进行拼接，up6已经提供了示例代码，已经实现了这个逻辑。
保证唯一性，控件会为每一个文件块添加信息，如块索引，块MD5,文件MD5
断点续传
up6自带续传功能，up6在服务端已经保存了文件的信息，在客户端也保存了文件的进度信息。在上传时控件会自动加载文件进度信息，开发者不需要关心这些细节。在文件块的处理逻辑中只需要根据文件块索引来识别即可。
此时上传时刷新页面或者关闭浏览器，再次上传相同文件时，之前已经上传成功的切片就不会再重新上传了。
服务端实现断点续传的逻辑基本相似，只要在getUploadSliceRecord内部调用服务端的查询接口获取已上传切片的记录即可，因此这里不再展开。
此外断点续传还需要考虑切片过期的情况：如果调用了mkfile接口，则磁盘上的切片内容就可以清除掉了，如果客户端一直不调用mkfile的接口，放任这些切片一直保存在磁盘显然是不可靠的，一般情况下，切片上传都有一段时间的有效期，超过该有效期，就会被清除掉。基于上述原因，断点续传也必须同步切片过期的实现逻辑。
续传效果
上传进度和暂停
通过xhr.upload中的progress方法可以实现监控每一个切片上传进度。
上传暂停的实现也比较简单，通过xhr.abort可以取消当前未完成上传切片的上传，实现上传暂停的效果，恢复上传就跟断点续传类似，先获取已上传的切片列表，然后重新发送未上传的切片。
由于篇幅关系，上传进度和暂停的功能这里就先不实现了。
实现效果：
小结
目前社区已经存在一些成熟的大文件上传解决方案，如七牛SDK，腾讯云SDK等，也许并不需要我们手动去实现一个简陋的大文件上传库，但是了解其原理还是十分有必要的。
本文首先整理了前端文件上传的几种方式，然后讨论了大文件上传的几种场景，以及大文件上传需要实现的几个功能
通过Blob对象的slice方法将文件拆分成切片
整理了服务端还原文件所需条件和参数，演示了PHP将切片还原成文件
通过保存已上传切片的记录来实现断点续传
还留下了一些问题，如：合并文件时避免内存溢出、切片失效策略、上传进度暂停等功能，并没有去深入或一一实现，继续学习吧
后端代码逻辑大部分是相同的，目前能够支持MySQL,Oracle,SQL。在使用前需要配置一下数据库，可以参考我写的这篇文章：http://blog.ncmem.com/wordpress/2019/08/12/java-http%E5%A4%A7%E6%96%87%E4%BB%B6%E6%96%AD%E7%82%B9%E7%BB%AD%E4%BC%A0%E4%B8%8A%E4%BC%A0/