最近メガバイト、研究の大きなファイルの数百人とテンセント7頭の牛をアップロードする必要があるのニーズを満たすので、大きなファイルのアップロード関連する機能を仕上げ、このフロントエンドでは、スライスのセグメントのアップロード機能を曇らせます。
一部の企業では、大容量ファイルのアップロードこのような大規模なストレージExcelのスプレッドシートのデータをアップロードするなど、より重要な対話シナリオは、オーディオおよびビデオファイルをアップロードしています。（より多くのパケットが送信される、再送パケット損失確率が大きくなる）、ファイルサイズが比較的大きい、またはネットワークの状態が悪い、アップロード時間が長くなります場合は、ユーザーがページを更新することはできません、あなただけのリクエストが完了するまで待機することができます。
以下のファイルのアップロードから始めて、自分の考えを整理し、大きなファイルをアップロードし、関連するコードの例を示し、組み込みのPHPによると、ファイル分割及びスプライシング方法は非常に簡単ですので、サービス側のコード例は、PHPを使って書かれました。
この記事のサンプルコードは、githubの上で主要なリファレンスです
大容量ファイルのアップロード話
大容量ファイルのアップロードを切断
いくつかの方法でファイルのアップロード
まず、ファイルをアップロードするにはいくつかの方法を見てください。
アップロードに共通フォーム
従来の形態のアップロードが良い選択であることを示すためにPHPを使用してください。最初のビルドファイルのアップロードフォーム、フォームを送信してにenctype =「multipart / form-データ」であるコンテンツの種類を指定し、フォームがバイナリデータをアップロードする必要がありますことを示しています。
書き込みindex.phpのアップロードファイルはコードを受信すると、あなたは、move_uploaded_file方法（PHP大法が良いですが...）を使用することができます
フォームフォームは、大きなファイルをアップロードするには、問題のサーバーのタイムアウトを満たすことは容易です。XHRすることにより、フロントエンドは、2つのアイデアにより、通常は、非同期的にファイルをアップロードすることができます。
アップロードファイルのエンコーディング
ファイルをエンコードすることで、その後、サーバ側でデコードし、その主な原則を達成するために、フロントエンドでブログをアップロードする前に画像圧縮を達成書いた最初のアイデアは、渡されたBASE64に画像を変換することです
varimgURL = URL.createObjectURL（ファイル）;
ctx.drawImage（imgURL、0、0）;
// 画像のエンコーディングを取得し、その後、非常に長い文字列として渡された絵は、
VARDATA = canvas.toDataURL（ "画像/ JPEG"、0.5）。
サーバーでは、比較的単純な、第1の復号base64である行われる必要があるし、その後に画像の保存
$ imgData = $ _REQUEST [ 'imgData'];
$ BASE64 =爆発（ ''、$ imgData）[1]。
$ IMG = BASE64_DECODE（$ BASE64）。
$ URL = './test.jpg';
もし（ますfile_put_contents（$ urlには、$ IMG））{
出口（json_encode（配列（
URL => $ URL
）））;
}
BASE64の大容量のためのコードのより大きな容積が元の画像より（3つのバイトを4バイト、したがって、エンコードされたテキストに変換するようにBase64で、元の言語の約3分の大きな割合を提示する）という欠点、ファイル、アップロードと解析時間が大幅に増加します。
base64での詳細な知識は、Base64でノートを参照してください。
base64エンコーディングに加えて、ファイルの内容もバイナリ形式でアップロードされたフロントエンドで直接読み取ることができます
// バイナリファイルを読みます
functionreadBinary（テキスト）{
VARDATA = newArrayBuffer（text.length）。
varui8a = newUint8Array（データ0）。
{（I ++; I <text.length VARI = 0）のための
ui8a [I] =（text.charCodeAt（I）＆0xffの）。
}
console.log（ui8a）
}
varreader = newFileReader。
リーダー。=関数{
readBinary（this.result）// 直接の結果やアップロードを読みます
}
// ファイルの内容は、入力からフィールド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/