.NET Core Web APi大文件分片上傳研究

前言

前兩天發表利用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參數文件大小進行比對這會有問題，由於此時可能文件流處於緩衝區內還未持久化到磁盤，藉此實現但願對有須要的童鞋提供一點思考方向。