.NET Core Web APi大文件分片上傳研究實(shí)現(xiàn)

更新時(shí)間：2020年11月05日 09:57:44 作者：Jeffcky

這篇文章主要介紹了.NET Core Web APi大文件分片上傳研究實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

前兩天發(fā)表利用FormData進(jìn)行文件上傳，然后有人問(wèn)要是大文件幾個(gè)G上傳怎么搞，常見(jiàn)的不就是分片再搞下斷點(diǎn)續(xù)傳，動(dòng)動(dòng)手差不多也能搞出來(lái)，只不過(guò)要深入的話，考慮的東西還是很多。由于斷點(diǎn)續(xù)傳之前寫(xiě)個(gè)幾篇，這里試試?yán)肍ormData來(lái)進(jìn)行分片上傳。

.NET Core Web APi文件分片上傳

這里我們依然是使用FormData來(lái)上傳，只不過(guò)在上傳之前對(duì)文件進(jìn)行分片處理，如下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>

接下來(lái)則是上傳腳本，如下：

$(function () {
  $('#submit').click(function () {
    UploadFile($('#file')[0].files);
  });
});

簡(jiǎn)單來(lái)說(shuō)只需實(shí)現(xiàn)上述UploadFile方法，對(duì)大文件進(jìn)行分片處理，然后上傳就完事，文件上傳后大致如下圖所示，最后只需將所有文件進(jìn)行合并處理為目標(biāo)文件即可

接下來(lái)我們?cè)敿?xì)講講如何實(shí)現(xiàn)，當(dāng)然重點(diǎn)就在于如何進(jìn)行分片處理，我們拿到上傳目標(biāo)文件，然后通過(guò)slice方法進(jìn)行分片，在分片處理之前我們定義緩沖區(qū)大小（默認(rèn)為8兆），然后循環(huán)遍歷文件大小，然后將分片數(shù)據(jù)塞入分片數(shù)組，最后利用循環(huán)或者隊(duì)列先進(jìn)先出機(jī)制獲取數(shù)組分片元素上傳。

function UploadFile(targetFile) {
    // 創(chuàng)建上傳文件分片緩沖區(qū)
    var fileChunks = [];
    // 目標(biāo)文件
    var file = targetFile[0];
    // 設(shè)置分片緩沖區(qū)大小
    var maxFileSizeMB = 8;
    var bufferChunkSize = maxFileSizeMB * (1024 * 1024);
    // 讀取文件流起始位置
    var fileStreamPos = 0;
    // 設(shè)置下一次讀取緩沖區(qū)初始大小
    var endPos = bufferChunkSize;
    // 文件大小
    var size = file.size;
    // 將文件進(jìn)行循環(huán)分片處理塞入分片數(shù)組
    while (fileStreamPos < size) {
      var fileChunkInfo = {
        file: file.slice(fileStreamPos, endPos),
        start: fileStreamPos,
        end: endPos
      }
      fileChunks.push(fileChunkInfo);
      fileStreamPos = endPos;
      endPos = fileStreamPos + bufferChunkSize;
    }
    // 獲取上傳文件分片總數(shù)量
    var totalParts = fileChunks.length;
    var partCount = 0;
    // 循環(huán)調(diào)用上傳每一片
    while (chunk = fileChunks.shift()) {
      partCount++;
      // 上傳文件命名約定
      var filePartName = file.name + ".partNumber-" + partCount;
      chunk.filePartName = filePartName;
      // url參數(shù)
      var url = 'partNumber=' + partCount + '&chunks=' + totalParts + '&size=' + bufferChunkSize + '&start=' + chunk.start + '&end=' + chunk.end + '&total=' + size;
      chunk.urlParameter = url;
      // 上傳文件
      UploadFileChunk(chunk);
    }
}

上述關(guān)于分片塞入數(shù)組就不用再?gòu)U話，這里我們將每一片文件命名先進(jìn)行一個(gè)約定（文件名+“.partNumber” + 分片號(hào)），以便所有分片上傳完成后獲取按照文件名中的分片號(hào)對(duì)其進(jìn)行排序合并，這也就是合并文件的依據(jù)。接下來(lái)就是上傳每一片文件

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上額外加了其他參數(shù)，為什么要加上這些參數(shù)呢？主要為解決幾個(gè)問(wèn)題，其一：前端確認(rèn)緩沖區(qū)大小，我們獲取前端確認(rèn)的緩沖區(qū)大小，這樣后臺(tái)不用寫(xiě)死，更加靈活，萬(wàn)一后續(xù)進(jìn)行了修改，誰(shuí)知道呢？其二：我們?cè)趺创_定文件是否已經(jīng)全部上傳完了呢？在URL上我們添加分片總數(shù)和文件實(shí)際大小來(lái)完全確定文件已經(jīng)全部上傳和文件完整無(wú)缺。當(dāng)然也額外添加了每一片讀取的起始位置和結(jié)束位置，若有所需也可以利用。多余的就不用我再解釋。接下來(lái)我們看看后臺(tái)如何對(duì)每一片進(jìn)行處理呢？在.NET Core中實(shí)際上提供了對(duì)應(yīng)APi來(lái)專(zhuān)門(mén)讀取FormData數(shù)據(jù)，利用Microsoft.AspNetCore.WebUtilities命名空間下的MultipartReader類(lèi)。

首先我們判斷是否請(qǐng)求內(nèi)容是否為FormData，同時(shí)通過(guò)上下文獲取上述文件讀取類(lèi)的參數(shù)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('"');
}

接下來(lái)我們定義分片類(lèi)而獲取URL上每一片的參數(shù)，如下：

public class FileChunk
  {
    //文件名
    public string FileName { get; set; }
    /// <summary>
    /// 當(dāng)前分片
    /// </summary>
    public int PartNumber { get; set; }
    /// <summary>
    /// 緩沖區(qū)大小
    /// </summary>
    public int Size { get; set; }
    /// <summary>
    /// 分片總數(shù)
    /// </summary>
    public int Chunks { get; set; }
    /// <summary>
    /// 文件讀取起始位置
    /// </summary>
    public int Start { get; set; }
    /// <summary>
    /// 文件讀取結(jié)束位置
    /// </summary>
    public int End { get; set; }
    /// <summary>
    /// 文件大小
    /// </summary>
    public int Total { get; set; }
  }

接下來(lái)在提交控制器方法上去讀取每一片數(shù)據(jù)如下

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();

然后就是循環(huán)每一片（section），若不為空說(shuō)明還存有分片文件，然后讀取URL上的緩沖區(qū)大小，如下：

while (section != null)
{
  //chunk為控制器方法上類(lèi)FileChunk參數(shù)
  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();
}

在利用內(nèi)置APi讀取FormData數(shù)據(jù)時(shí)，在.NET Core 3.x會(huì)拋出如下異常：

大致原因出在.NET Core內(nèi)置提供了對(duì)于參數(shù)的綁定和此方法讀取貌似有點(diǎn)沖突導(dǎo)致，我們實(shí)現(xiàn)如下特性移除對(duì)應(yīng)綁定，然后將其添加到文件上傳方法上即可

[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)
  {
  }
}

所有分片文件上傳完成后則是合并文件，合并的依據(jù)則是判斷URL上當(dāng)前分片數(shù)和分片總數(shù)是否相等，如下：

//計(jì)算上傳文件大小實(shí)時(shí)反饋進(jìn)度（TODO)

//合并文件（可能涉及轉(zhuǎn)碼等）
if (chunk.PartNumber == chunk.Chunks)
{
  await MergeChunkFile(chunk);
}

既然是合并文件那就需要通過(guò)分片文件名稱(chēng)上末尾的分片號(hào)進(jìn)行排序和拿到每一個(gè)分片文件路徑以便合并后刪除所有分片文件，所以我們定義如下類(lèi)

public class FileSort
{
  public const string PART_NUMBER = ".partNumber-";
  /// <summary>
  /// 文件名
  /// </summary>
  public string FileName { get; set; }
  /// <summary>
  /// 文件分片號(hào)
  /// </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;

  //上傳文件實(shí)際名稱(chēng)
  var baseFileName = chunk.FileName.Substring(0, chunk.FileName.IndexOf(partToken));

  //根據(jù)命名約定查詢(xún)指定目錄下符合條件的所有分片文件
  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);
  }
}

總結(jié)

下載地址：https://github.com/wangpengxpy/.NETCoreSliceUpload。以上采用技巧式方案上實(shí)現(xiàn)了大文件分片處理，一些細(xì)節(jié)并未過(guò)多考慮，比如網(wǎng)絡(luò)問(wèn)題，中斷問(wèn)題。有些童鞋下載源碼使用時(shí)所發(fā)現(xiàn)的文件合并被占用bug已解決并優(yōu)化部分代碼，借此實(shí)現(xiàn)希望對(duì)有需要的童鞋提供一點(diǎn)思考方向。

到此這篇關(guān)于.NET Core Web APi大文件分片上傳研究實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān).NET Core Web APi分片上傳內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: