前言
前兩天發表利用FormData進行檔案上傳，然後有人問要是大檔案幾個G上傳怎麼搞，常見的不就是分片再搞下斷點續傳，動動手差不多也能搞出來，只不過要深入的話，考慮的東西還是很多。由於斷點續傳之前寫個幾篇，這裡試試利用FormData來進行分片上傳。
.NET Core Web APi檔案分片上傳
這裡我們依然是使用FormData來上傳，只不過在上傳之前對檔案進行分片處理，如下HTML程式碼
<div class="form-horizontal" style="margin-top:80px;"> <div class="form-group"> <div class="col-md-10"> <input name="file" id="file" type="file" /> </div> </div> <div class="form-group"> <div class="col-md-offset-2 col-md-10"> <input type="submit" id="submit" value="上傳" class="btn btn-success" /> </div> </div> </div>
接下來則是上傳指令碼，如下：
$(function () { $('#submit').click(function () { UploadFile($('#file')[0].files); }); });
簡單來說只需實現上述UploadFile方法，對大檔案進行分片處理，然後上傳就完事，檔案上傳後大致如下圖所示，最後只需將所有檔案進行合併處理為目標檔案即可
接下來我們詳細講講如何實現，當然重點就在於如何進行分片處理，我們拿到上傳目標檔案，然後通過slice方法進行分片，在分片處理之前我們定義緩衝區大小（預設為8兆），然後迴圈遍歷檔案大小，然後將分片資料塞入分片陣列，最後利用迴圈或者佇列先進先出機制獲取陣列分片元素上傳。
function UploadFile(targetFile) { // 建立上傳檔案分片緩衝區 var fileChunks = []; // 目標檔案 var file = targetFile[0]; // 設定分片緩衝區大小 var maxFileSizeMB = 8; var bufferChunkSize = maxFileSizeMB * (1024 * 1024); // 讀取檔案流起始位置 var fileStreamPos = 0; // 設定下一次讀取緩衝區初始大小 var endPos = bufferChunkSize; // 檔案大小 var size = file.size; // 將檔案進行迴圈分片處理塞入分片陣列 while (fileStreamPos < size) { var fileChunkInfo = { file: file.slice(fileStreamPos, endPos), start: fileStreamPos, end: endPos } fileChunks.push(fileChunkInfo); fileStreamPos = endPos; endPos = fileStreamPos + bufferChunkSize; } // 獲取上傳檔案分片總數量 var totalParts = fileChunks.length; var partCount = 0; // 迴圈呼叫上傳每一片 while (chunk = fileChunks.shift()) { partCount++; // 上傳檔案命名約定 var filePartName = file.name + ".partNumber-" + partCount; chunk.filePartName = filePartName; // url引數 var url = 'partNumber=' + partCount + '&chunks=' + totalParts + '&size=' + bufferChunkSize + '&start=' + chunk.start + '&end=' + chunk.end + '&total=' + size; chunk.urlParameter = url; // 上傳檔案 UploadFileChunk(chunk); } }
上述關於分片塞入陣列就不用再廢話，這裡我們將每一片檔案命名先進行一個約定（檔名+“.partNumber” + 分片號），以便所有分片上傳完成後獲取按照檔名中的分片號對其進行排序合併，這也就是合併檔案的依據。接下來就是上傳每一片檔案
function UploadFileChunk(chunk) { var data = new FormData(); data.append("file", chunk.file, chunk.filePartName); $.ajax({ url: '/api/upload/upload?' + chunk.urlParameter, type: "post", cache: false, contentType: false, processData: false, data: data, }); }
我們可以看到在URL上額外加了其他引數，為什麼要加上這些引數呢？主要為解決幾個問題，其一：前端確認緩衝區大小，我們獲取前端確認的緩衝區大小，這樣後臺不用寫死，更加靈活，萬一後續進行了修改，誰知道呢？其二：我們怎麼確定檔案是否已經全部上傳完了呢？在URL上我們新增分片總數和檔案實際大小來完全確定檔案已經全部上傳和檔案完整無缺。當然也額外新增了每一片讀取的起始位置和結束位置，若有所需也可以利用。多餘的就不用我再解釋。接下來我們看看後臺如何對每一片進行處理呢？在.NET Core中實際上提供了對應APi來專門讀取FormData資料，利用Microsoft.AspNetCore.WebUtilities名稱空間下的MultipartReader類。
首先我們判斷是否請求內容是否為FormData，同時通過上下文獲取上述檔案讀取類的引數boundary，如下：
private bool IsMultipartContentType(string contentType) { return !string.IsNullOrEmpty(contentType) && contentType.IndexOf("multipart/", StringComparison.OrdinalIgnoreCase) >= 0; } private string GetBoundary(string contentType) { var elements = contentType.Split(' '); var element = elements.Where(entry => entry.StartsWith("boundary=")).First(); var boundary = element.Substring("boundary=".Length); if (boundary.Length >= 2 && boundary[0] == '"' && boundary[boundary.Length - 1] == '"') { boundary = boundary.Substring(1, boundary.Length - 2); } return boundary; } private string GetFileName(string contentDisposition) { return contentDisposition .Split(';') .SingleOrDefault(part => part.Contains("filename")) .Split('=') .Last() .Trim('"'); }
接下來我們定義分片類而獲取URL上每一片的引數，如下：
public class FileChunk { //檔名 public string FileName { get; set; } /// <summary> /// 當前分片 /// </summary> public int PartNumber { get; set; } /// <summary> /// 緩衝區大小 /// </summary> public int Size { get; set; } /// <summary> /// 分片總數 /// </summary> public int Chunks { get; set; } /// <summary> /// 檔案讀取起始位置 /// </summary> public int Start { get; set; } /// <summary> /// 檔案讀取結束位置 /// </summary> public int End { get; set; } /// <summary> /// 檔案大小 /// </summary> public int Total { get; set; } }
接下來在提交控制器方法上去讀取每一片資料如下
if (!IsMultipartContentType(context.Request.ContentType)) { return BadRequest(); } var boundary = GetBoundary(context.Request.ContentType); if (string.IsNullOrEmpty(boundary)) { return BadRequest(); } var reader = new MultipartReader(boundary, context.Request.Body); var section = await reader.ReadNextSectionAsync();
然後就是迴圈每一片（section），若不為空說明還存有分片檔案，然後讀取URL上的緩衝區大小，如下：
while (section != null) { //chunk為控制器方法上類FileChunk引數 var buffer = new byte[chunk.Size]; var fileName = GetFileName(section.ContentDisposition); //這裡獲取檔名便於查詢指定資料夾下所有檔案 chunk.FileName = fileName; var path = Path.Combine(_environment.WebRootPath, DEFAULT_FOLDER, fileName); using (var stream = new FileStream(path, FileMode.Append)) { int bytesRead; do { bytesRead = await section.Body.ReadAsync(buffer, 0, buffer.Length); stream.Write(buffer, 0, bytesRead); } while (bytesRead > 0); } section = await reader.ReadNextSectionAsync(); }
在利用內建APi讀取FormData資料時，在.NET Core 3.x會丟擲如下異常：
大致原因出在.NET Core內建提供了對於引數的繫結和此方法讀取貌似有點衝突導致，我們實現如下特性移除對應繫結，然後將其新增到檔案上傳方法上即可
[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)] public sealed class DisableFormValueModelBindingAttribute : Attribute, IResourceFilter { public void OnResourceExecuting(ResourceExecutingContext context) { var factories = context.ValueProviderFactories; factories.RemoveType<FormValueProviderFactory>(); factories.RemoveType<FormFileValueProviderFactory>(); factories.RemoveType<JQueryFormValueProviderFactory>(); } public void OnResourceExecuted(ResourceExecutedContext context) { } }
所有分片檔案上傳完成後則是合併檔案，合併的依據則是判斷URL上當前分片數和分片總數是否相等，如下：
//計算上傳檔案大小實時反饋進度（TODO) //合併檔案（可能涉及轉碼等） if (chunk.PartNumber == chunk.Chunks) { await MergeChunkFile(chunk); }
既然是合併檔案那就需要通過分片檔名稱上末尾的分片號進行排序和拿到每一個分片檔案路徑以便合併後刪除所有分片檔案，所以我們定義如下類
public class FileSort { public const string PART_NUMBER = ".partNumber-"; /// <summary> /// 檔名 /// </summary> public string FileName { get; set; } /// <summary> /// 檔案分片號 /// </summary> public int PartNumber { get; set; } }
最終合併檔案方法，如下：
public async Task MergeChunkFile(FileChunk chunk) { //檔案上傳目錄名 var uploadDirectoryName = Path.Combine(_environment.WebRootPath, DEFAULT_FOLDER, chunk.FileName); //分片檔案命名約定 var partToken = FileSort.PART_NUMBER; //上傳檔案實際名稱 var baseFileName = chunk.FileName.Substring(0, chunk.FileName.IndexOf(partToken)); //根據命名約定查詢指定目錄下符合條件的所有分片檔案 var searchpattern = $"{Path.GetFileName(baseFileName)}{partToken}*"; //獲取所有分片檔案列表 var filesList = Directory.GetFiles(Path.GetDirectoryName(uploadDirectoryName), searchpattern); if (!filesList.Any()) { return; } var mergeFiles = new List<FileSort>(); foreach (string file in filesList) {
var sort = new FileSort { FileName = file }; baseFileName = file.Substring(0, file.IndexOf(partToken)); var fileIndex = file.Substring(file.IndexOf(partToken) + partToken.Length); int.TryParse(fileIndex, out var number); if (number <= 0) { continue; } sort.PartNumber = number; mergeFiles.Add(sort); }
// 按照分片排序 var mergeOrders = mergeFiles.OrderBy(s => s.PartNumber).ToList(); // 合併檔案 using var fileStream = new FileStream(baseFileName, FileMode.Create); foreach (var fileSort in mergeOrders) { using FileStream fileChunk = new FileStream(fileSort.FileName, FileMode.Open); await fileChunk.CopyToAsync(fileStream); } //刪除分片檔案 DeleteFile(mergeFiles); } public void DeleteFile(List<FileSort> files) { foreach (var file in files) { System.IO.File.Delete(file.FileName); } }
總結
下載地址：https://github.com/wangpengxpy/.NETCoreSliceUpload。以上採用技巧式方案上實現了大檔案分片處理，一些細節並未過多考慮，比如網路問題，中斷問題、以及檔案由於採取非同步上傳，若我們通過計算所有檔案大小和URL引數檔案大小進行比對這會有問題，因為此時可能檔案流處於緩衝區內還未持久化到磁碟，藉此實現希望對有需要的童鞋提供一點思考方向。接下來主要精力都會放在同步發表微信公眾號文章和錄製相關視訊放在b站上，歡迎各位童鞋關注。