.form檔案_前端大檔案上傳方法(深度好文)

首先祝大家端午節快樂！事業家庭更上一層樓。！

最近遇見一個需要上傳百兆大檔案的需求，調研了七牛和騰訊雲的切片分段上傳功能，是以在此整理前端大檔案上傳相關功能的實作。

在某些業務中，大檔案上傳是一個比較重要的互動場景，如上傳入庫比較大的Excel表格資料、上傳影音檔案等。如果檔案體積比較大，或者網絡條件不好時，上傳的時間會比較長（要傳輸更多的封包，丢包重傳的機率也更大），使用者不能重新整理頁面，隻能耐心等待請求完成。

下面從檔案上傳方式入手，整理大檔案上傳的思路，并給出了相關執行個體代碼，由于PHP内置了比較友善的檔案拆分和拼接方法，是以服務端代碼使用PHP進行示例編寫。

檔案上傳的幾種方式

首先我們來看看檔案上傳的幾種方式。

普通表單上傳

使用PHP來展示正常的表單上傳是一個不錯的選擇。首先建構檔案上傳的表單，并指定表單的送出内容類型為enctype="multipart/form-data"，表明表單需要上傳二進制資料。

<form action="/index.php" method="POST" enctype="multipart/form-data">
 <input type="file" name="myfile">
 <input type="submit">
</form>

然後編寫index.php上傳檔案接收代碼，使用move_uploaded_file方法即可(php大法好...)

$imgName = 'IMG'.time().'.'.str_replace('image/','',$_FILES["myfile"]['type']);
$fileName = 'upload/'.$imgName;
// 移動上傳檔案至指定upload檔案夾下，并根據傳回值判斷操作是否成功
if (move_uploaded_file($_FILES['myfile']['tmp_name'], $fileName)){
 echo $fileName;
}else {
 echo "nonn";
}

form表單上傳大檔案時，很容易遇見伺服器逾時的問題。通過xhr，前端也可以進行異步上傳檔案的操作，一般由兩個思路。

檔案編碼上傳

第一個思路是将檔案進行編碼，然後在服務端進行解碼，其主要實作原理就是将圖檔轉換成base64進行傳遞

var imgURL = URL.createObjectURL(file);
ctx.drawImage(imgURL, 0, 0);
// 擷取圖檔的編碼，然後将圖檔當做是一個很長的字元串進行傳遞
var data = canvas.toDataURL("image/jpeg", 0.5);

在服務端需要做的事情也比較簡單，首先解碼base64，然後儲存圖檔即可

$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編碼的缺點在于其體積比原圖檔更大（因為Base64将三個位元組轉化成四個位元組，是以編碼後的文本，會比原文本大出三分之一左右），對于體積很大的檔案來說，上傳和解析的時間會明顯增加。

除了進行base64編碼，還可以在前端直接讀取檔案内容後以二進制格式上傳

// 讀取二進制檔案
function readBinary(text){
 var data = new ArrayBuffer(text.length);
 var ui8a = new Uint8Array(data, 0);
 for (var i = 0; i < text.length; i++){ 
 ui8a[i] = (text.charCodeAt(i) & 0xff);
 }
 console.log(ui8a)
}
var reader = new FileReader();
reader.onload = function(){
	 readBinary(this.result) // 讀取result或直接上傳
}
// 把從input裡讀取的檔案内容，放到fileReader的result字段裡
reader.readAsBinaryString(file);

formData異步上傳

FormData對象主要用來組裝一組用 XMLHttpRequest發送請求的鍵/值對，可以更加靈活地發送Ajax請求。可以使用FormData來模拟表單送出。

let files = e.target.files // 擷取input的file對象
let formData = new FormData();
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内的文本來擷取。

function upload(){
 var now = +new Date()
 var id = '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(){
 var content = $(this).contents().find("body").text()
 try{
 var data = JSON.parse(content)
 }catch(e){
 console.log(e)
 }
 })
}

大檔案上傳

現在來看看在上面提到的幾種上傳方式中實作大檔案上傳會遇見的逾時問題，

表單上傳和iframe無重新整理頁面上傳，實際上都是通過form标簽進行上傳檔案，這種方式将整個請求完全交給浏覽器處理，當上傳大檔案時，可能會遇見請求逾時的情形
通過fromData，其實際也是在xhr中封裝一組請求參數，用來模拟表單請求，無法避免大檔案上傳逾時的問題
編碼上傳，我們可以比較靈活地控制上傳的内容

大檔案上傳最主要的問題就在于：

在同一個請求中，要上傳大量的資料，導緻整個過程會比較漫長，且失敗後需要重頭開始上傳

。試想，如果我們将這個請求拆分成多個請求，每個請求的時間就會縮短，且如果某個請求失敗，隻需要重新發送這一次請求即可，無需從頭開始，這樣是否可以解決大檔案上傳的問題呢？

綜合上面的問題，看來大檔案上傳需要實作下面幾個需求

支援拆分上傳請求(即切片)
支援斷點續傳
支援顯示上傳進度和暫停上傳

接下來讓我們依次實作這些功能，看起來最主要的功能應該就是切片了。

檔案切片

編碼方式上傳中，在前端我們隻要先擷取檔案的二進制内容，然後對其内容進行拆分，最後将每個切片上傳到服務端即可。

在JavaScript中，檔案FIle對象是Blob對象的子類，Blob對象包含一個重要的方法slice，通過這個方法，我們就可以對二進制檔案進行拆分。

下面是一個拆分檔案的示例

function slice(file, piece = 1024 * 1024 * 5) {
 let totalSize = file.size; // 檔案總大小
 let start = 0; // 每次上傳的開始位元組
 let end = start + piece; // 每次上傳的結尾位元組
 let chunks = []
 while (start < totalSize) {
 // 根據長度截取每次需要上傳的資料
 // File對象繼承自Blob對象，是以包含slice方法
 let blob = file.slice(start, end); 
 chunks.push(blob)
 start = end;
 end = start + piece;
 }
 return chunks
}

将檔案拆分成piece大小的分塊，然後每次請求隻需要上傳這一個部分的分塊即可

let file = document.querySelector("[name=file]").files[0];
const LENGTH = 1024 * 1024 * 0.1;
let chunks = slice(file, LENGTH); // 首先拆分切片
chunks.forEach(chunk=>{
 let fd = new FormData();
 fd.append("file", chunk);
 post('/mkblk.php', fd)
})

伺服器接收到這些切片後，再将他們拼接起來就可以了，下面是PHP拼接切片的示例代碼

$filename = './upload/' . $_POST['filename'];//确定上傳的檔案名
//第一次上傳時沒有檔案，就建立檔案，此後上傳隻需要把資料追加到此檔案中
if(!file_exists($filename)){
 move_uploaded_file($_FILES['file']['tmp_name'],$filename);
}else{
 file_put_contents($filename,file_get_contents($_FILES['file']['tmp_name']),FILE_APPEND);
 echo $filename;
}

測試時記得修改nginx的server配置，否則大檔案可能會提示413 Request Entity Too Large的錯誤。

server {
	// ...
	client_max_body_size 50m;
}

上面這種方式來存在一些問題

無法識别一個切片是屬于哪一個切片的，當同時發生多個請求時，追加的檔案内容會出錯
切片上傳接口是異步的，無法保證伺服器接收到的切片是按照請求順序拼接的

是以接下來我們來看看應該如何在服務端還原切片。

還原切片

在後端需要将多個相同檔案的切片還原成一個檔案，上面這種處理切片的做法存在下面幾個問題

如何識别多個切片是來自于同一個檔案的，這個可以在每個切片請求上傳遞一個相同檔案的context參數
如何将多個切片還原成一個檔案
确認所有切片都已上傳，這個可以通過用戶端在切片全部上傳後調用mkfile接口來通知服務端進行拼接
找到同一個context下的所有切片，确認每個切片的順序，這個可以在每個切片上标記一個位置索引值
按順序拼接切片，還原成檔案

上面有一個重要的參數，即context，我們需要擷取為一個檔案的唯一辨別，可以通過下面兩種方式擷取

根據檔案名、檔案長度等基本資訊進行拼接，為了避免多個使用者上傳相同的檔案，可以再額外拼接使用者資訊如uid等保證唯一性
根據檔案的二進制内容計算檔案的hash，這樣隻要檔案内容不一樣，則辨別也會不一樣，缺點在于計算量比較大.

修改上傳代碼，增加相關參數

// 擷取context，同一個檔案會傳回相同的值
function createContext(file) {
 	return file.name + file.length
}
let file = document.querySelector("[name=file]").files[0];
const LENGTH = 1024 * 1024 * 0.1;
let chunks = slice(file, LENGTH);
// 擷取對于同一個檔案，擷取其的context
let context = createContext(file);
let tasks = [];
chunks.forEach((chunk, index) => {
 let fd = new FormData();
 fd.append("file", chunk);
 // 傳遞context
 fd.append("context", context);
 // 傳遞切片索引值
 fd.append("chunk", index + 1);
	
 tasks.push(post("/mkblk.php", fd));
});
// 所有切片上傳完畢後，調用mkfile接口
Promise.all(tasks).then(res => {
 let fd = new FormData();
 fd.append("context", context);
 fd.append("chunks", chunks.length);
 post("/mkfile.php", fd).then(res => {
 console.log(res);
 });
});

在mkblk.php接口中，我們通過context來儲存同一個檔案相關的切片

// mkblk.php
$context = $_POST['context'];
$path = './upload/' . $context;
if(!is_dir($path)){
 mkdir($path);
}
// 把同一個檔案的切片放在相同的目錄下
$filename = $path .'/'. $_POST['chunk'];
$res = move_uploaded_file($_FILES['file']['tmp_name'],$filename);

除了上面這種簡單通過目錄區分切片的方法之外，還可以将切片資訊儲存在資料庫來進行索引。接下來是mkfile.php接口的實作，這個接口會在所有切片上傳後調用

// mkfile.php
$context = $_POST['context'];
$chunks = (int)$_POST['chunks'];
//合并後的檔案名
$filename = './upload/' . $context . '/file.jpg'; 
for($i = 1; $i <= $chunks; ++$i){
 $file = './upload/'.$context. '/' .$i; // 讀取單個切塊
 $content = file_get_contents($file);
 if(!file_exists($filename)){
 $fd = fopen($filename, "w+");
 }else{
 $fd = fopen($filename, "a");
 }
 fwrite($fd, $content); // 将切塊合并到一個檔案上
}
echo $filename;

這樣就解決了上面的兩個問題：

識别切片來源
保證切片拼接順序

斷點續傳

即使将大檔案拆分成切片上傳，我們仍需等待所有切片上傳完畢，在等待過程中，可能發生一系列導緻部分切片上傳失敗的情形，如網絡故障、頁面關閉等。由于切片未全部上傳，是以無法通知服務端合成檔案。這種情況下可以通過

斷點續傳

來進行處理。

斷點續傳指的是：可以從已經上傳部分開始繼續上傳未完成的部分，而沒有必要從頭開始上傳，節省上傳時間。

由于整個上傳過程是按切片次元進行的，且mkfile接口是在所有切片上傳完成後由用戶端主動調用的，是以斷點續傳的實作也十分簡單：

在切片上傳成功後，儲存已上傳的切片資訊
當下次傳輸相同檔案時，周遊切片清單，隻選擇未上傳的切片進行上傳
所有切片上傳完畢後，再調用mkfile接口通知服務端進行檔案合并

是以問題就落在了如何儲存已上傳切片的資訊了，儲存一般有兩種政策

可以通過locaStorage等方式儲存在前端浏覽器中，這種方式不依賴于服務端，實作起來也比較友善，缺點在于如果使用者清除了本地檔案，會導緻上傳記錄丢失
服務端本身知道哪些切片已經上傳，是以可以由服務端額外提供一個根據檔案context查詢已上傳切片的接口，在上傳檔案前調用該檔案的曆史上傳記錄

下面讓我們通過在本地儲存已上傳切片記錄，來實作斷點上傳的功能

// 擷取已上傳切片記錄
function getUploadSliceRecord(context){
 let record = localStorage.getItem(context)
 if(!record){
 return []
 }else {
 try{
 return JSON.parse(record)
 }catch(e){}
 }
}
// 儲存已上傳切片
function saveUploadSliceRecord(context, sliceIndex){
 let list = getUploadSliceRecord(context)
 list.push(sliceIndex)
 localStorage.setItem(context, JSON.stringify(list))
}

然後對上傳邏輯稍作修改，主要是增加上傳前檢測是已經上傳、上傳後儲存記錄的邏輯

let context = createContext(file);
// 擷取上傳記錄
let record = getUploadSliceRecord(context);
let tasks = [];
chunks.forEach((chunk, index) => {
 // 已上傳的切片則不再重新上傳
 if(record.includes(index)){
 return
 }
	
 let fd = new FormData();
 fd.append("file", chunk);
 fd.append("context", context);
 fd.append("chunk", index + 1);
 let task = post("/mkblk.php", fd).then(res=>{
 // 上傳成功後儲存已上傳切片記錄
 saveUploadSliceRecord(context, index)
 record.push(index)
 })
 tasks.push(task);
});

此時上傳時重新整理頁面或者關閉浏覽器，再次上傳相同檔案時，之前已經上傳成功的切片就不會再重新上傳了。

服務端實作斷點續傳的邏輯基本相似，隻要在getUploadSliceRecord内部調用服務端的查詢接口擷取已上傳切片的記錄即可，是以這裡不再展開。

此外斷點續傳還需要考慮

切片過期

的情況：如果調用了mkfile接口，則磁盤上的切片内容就可以清除掉了，如果用戶端一直不調用mkfile的接口，放任這些切片一直儲存在磁盤顯然是不可靠的，一般情況下，切片上傳都有一段時間的有效期，超過該有效期，就會被清除掉。基于上述原因，斷點續傳也必須同步切片過期的實作邏輯。

上傳進度和暫停

通過xhr.upload中的progress方法可以實作監控每一個切片上傳進度。

上傳暫停的實作也比較簡單，通過xhr.abort可以取消目前未完成上傳切片的上傳，實作上傳暫停的效果，恢複上傳就跟斷點續傳類似，先擷取已上傳的切片清單，然後重新發送未上傳的切片。

由于篇幅關系，上傳進度和暫停的功能這裡就先不實作了。

小結

目前社群已經存在一些成熟的大檔案上傳解決方案，如七牛SDK，騰訊雲SDK等，也許并不需要我們手動去實作一個簡陋的大檔案上傳庫，但是了解其原理還是十分有必要的。

本文首先整理了前端檔案上傳的幾種方式，然後讨論了大檔案上傳的幾種場景，以及大檔案上傳需要實作的幾個功能

通過Blob對象的slice方法将檔案拆分成切片
整理了服務端還原檔案所需條件和參數，示範了PHP将切片還原成檔案
通過儲存已上傳切片的記錄來實作斷點續傳

最後再次祝大家端午節快樂！

有喜歡的小夥伴可以動動小手關注下哦！

.form檔案_前端大檔案上傳方法(深度好文)

作者：橙紅年代

連結：https://juejin.im/post/5cf765275188257c6b51775f

.form檔案_前端大檔案上傳方法(深度好文)

繼續閱讀

ajax送出form表單資料_[基礎程式設計學習] [PHP7數組詳解]：第2章（1）從表單送出資料說起...

.net fileupload批量上傳可删除_封裝直傳阿裡雲存儲檔案上傳控件

aws php 上傳檔案限制大小_11個提問頻率最高的PHP面試題

php ajax送出form表單_PHP學習-表單（一）

.form檔案_使用MultipartFile上傳檔案

servlet 上傳圖檔無法立即重新整理顯示_mall整合OSS實作檔案上傳

bat 判斷檔案名字含有某些字段_一篇文章，學會jmeter模拟檔案上傳、下載下傳操作

gin 怎麼通過 post 發送結構體_Go Web 架構 Gin 實踐12—優化配置結構及實作圖檔上傳...前言優化配置結構一、講解二、落實優化配置讀取及設定初始化順序驗證抽離 File實作上傳圖檔接口

.form檔案_nodejs伺服器如何接收前端傳遞的檔案

php檔案怎麼接收表單送出的驗證碼的值_200行代碼實作解鎖滑動驗證碼（文末附源碼）...

.form檔案_如何使用bootstrap制作form表單

div生成圖檔_上傳圖檔到阿裡雲OSS傳統模式直接表單方式ajax方式通路上傳的檔案

.form檔案_【SpringBoot WEB系列】RestTemplate之檔案上傳

php怎麼運作網頁_PHP表單送出

struts2 ajax上傳檔案 file空_檔案操作類基礎代碼審計0x00 檔案包含0x01 任意檔案删除0x02 任意檔案下載下傳0x03 檔案上傳0x04 文末