ASP.NET CORE使用WebUploader对大文件分片上传,实时通知前端上传进度

阅读参考此文章前，请先看一下
ASP.NET Core 使用SignalR后台实时推送数据给Echarts展示图表

此文章是上一篇的功能扩展，一些基本的程序模块逻辑都已经在上一篇文章中做了介绍，这里就不再重复。

本次，我们来实现一个单个大文件上传，并且把后台对上传文件的处理进度通过ASP.NET CORE SignalR反馈给前端展示，比如上传一个大的zip压缩包文件，后台进行解压缩，并且对压缩包中的文件进行md5校验，同时要求前台可以实时（实际情况看网络情况）展示后台对压缩包的处理进度（解压、校验文件）。

在前端上传文件的组件选择上，采用了WebUploader(Web Uploader)这个优秀的前端组件，下面是来自它的官网介绍：

WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。

采用大文件分片并发上传，极大的提高了文件上传效率。

WebUploader的功能很多，本次只使用它的上传前文件MD5校验、并发分片上传、分片MD5校验三个主要功能，分别来实现类似网盘中的文件【秒传】，浏览器多线程上传文件和文件的断点续传。

在正式使用WebUploader进行上传文件之前，先对它的执行流程和触发的事件做个大致的介绍（如有不对的地方请指正），我们可以通过它触发的事件来做相应的流程或业务上的预处理，比如文件秒传，重复文件检测等。

当WebUploader正确加载完成后，会触发它的ready事件；

当点击文件选择框的时候（其它方式传入文件所触发的事件请参考官方文档），会触发它的dialogOpen事件；

当选择文件完成后，触发事件的流程为：beforeFileQueued ==> fileQueued ==> filesQueued；

当点击（开始）上传的时候，触发事件的流程为：

1、正常文件上传流程

startUpload(如秒传（后台通过文件的md5判断返回）秒传则触发UploadSkip) ==> uploadStart ==> uploadBeforeSend ==> uploadProgress ==> uploadAccept(接收服务器处理分块传输后的返回信息) ==> uploadSuccess ==> uploadComplete ==> uploadFinished

2、文件秒传或续传流程

startUpload ==> uploadStart（触发秒传或文件续传） ==> uploadSkip ==> uploadSuccess ==> uploadComplete ==> uploadFinished

现在，我们在上一次项目的基础上做一些改造升级，最终实现我们本次的功能。

先看效果（GIF录制时间略长，请耐心等待一下）

首先，我们引用大名鼎鼎的WebUploader组件库。在项目上右键==>添加==>客户端库 的界面中选择unpkg然后输入webuploader 

为了实现压缩文件的解压缩操作，我们在Nuget中引用SharpZipLib组件

 然后我们在appsettings.json中增加一个配置用来保存上传文件。

{
  "Logging": {
    "LogLevel": {
      "Default": "Information",
      "Microsoft": "Warning",
      "Microsoft.Hosting.Lifetime": "Information"
    }
  },
  "FileUpload": {
    "TempPath": "temp",//临时文件保存目录
    "FileDir": "upload",//上传完成后的保存目录
    "FileExt": "zip,rar"//允许上传的文件类型
  },
  "AllowedHosts": "*"
}

在项目中新建一个Model目录，用来实现上传文件的相关配置，建立相应的多个类文件 

FileUploadConfig.cs 服务器用来接受和保存文件的配置

using System;
 
namespace signalr.Model
{
    /// 
    /// 上传文件配置类
    /// 
    [Serializable]
    public class FileUploadConfig
    {
        /// 
        /// 临时文件夹目录名
        /// 
        public string TempPath { get; set; }
        /// 
        /// 上传文件保存目录名
        /// 
        public string FileDir { get; set; }
        /// 
        /// 允许上传的文件扩展名
        /// 
        public string FileExt { get; set; }
    }
}

UploadFileWholeModel.cs 前台开始传输前会对文件进行一次MD5算法，这里可以通过文件MD5值传递给后台来通过比对已上传的文件MD5值列表来实现秒传功能

namespace signalr.Model
{
    /// 
    /// 文件秒传检测前台传递参数
    /// 
    public class UploadFileWholeModel
    {
        /// 
        /// 请求类型，这里固定为：whole
        /// 
        public string CheckType { get; set; }
        /// 
        /// 文件的MD5
        /// 
        public string FileMd5 { get; set; }
        /// 
        /// 前台文件的唯一标识
        /// 
        public string FileGuid { get; set; }
        /// 
        /// 前台上传文件名
        /// 
        public string FileName { get; set; }
        /// 
        /// 文件大小
        /// 
        public int? FileSize { get; set; }
    }
}

UploadFileChunkModel.cs 前台文件分块传输的时候会对分块传输内容进行MD5计算，并且分块传输的时候会传递当前分块的一些信息，这里对应的后台接收实体类。

我们可以通过分块传输的MD5值来实现文件续传功能（如文件的某块MD5已存在则返回给前台跳过当前块）

namespace signalr.Model
{
    /// 
    /// 文件分块（续传）传递参数
    /// 
    public class UploadFileChunkModel
    {
        /// 
        /// 文件分块传输检测类型，这里固定为chunk
        /// 
        public string CheckType { get; set; }
        /// 
        /// 文件的总大小
        /// 
        public long? FileSize { get; set; }
        /// 
        /// 当前块所属文件编号
        /// 
        public string FileId { get; set; }
        /// 
        /// 当前块基于文件的开始偏移量
        /// 
        public long? ChunkStart { get; set; }
        /// 
        /// 当前块基于文件的结束偏移量
        /// 
        public long? ChunkEnd { get; set; }
        /// 
        /// 当前块的大小
        /// 
        public long? ChunkSize { get; set; }
        /// 
        /// 当前块编号
        /// 
        public string ChunkIndex { get; set; }
        /// 
        /// 当前文件分块总数
        /// 
        public string ChunkCount { get; set; }
        /// 
        /// 当前块的编号
        /// 
        public string ChunkId { get; set; }
        /// 
        /// 当前块的md5
        /// 
        public string Md5 { get; set; }
    }
}

FormData.cs 这是分块传输时传递的当前块的信息配置

using System;
 
namespace signalr.Model
{
    /// 
    /// 上传文件时的附加信息
    /// 
    [Serializable]
    public class FormData
    {
        /// 
        /// 当前请求类型 分片传输是：chunk
        /// 
        public string Checktype { get; set; }
        /// 
        /// 文件总字节数
        /// 
        public int? Filesize { get; set; }
        /// 
        /// 文件唯一编号
        /// 
        public string Fileid { get; set; }
        /// 
        /// 分片数据大小
        /// 
        public int? Chunksize { get; set; }
        /// 
        /// 当前分片编号
        /// 
        public int? Chunkindex { get; set; }
        /// 
        /// 分片起始编译量
        /// 
        public int? Chunkstart { get; set; }
        /// 
        /// 分片结束编译量
        /// 
        public int? Chunkend { get; set; }
        /// 
        /// 分片总数量
        /// 
        public int? Chunkcount { get; set; }
        /// 
        /// 当前分片唯一编号
        /// 
        public string Chunkid { get; set; }
        /// 
        /// 当前块MD5值
        /// 
        public string Md5 { get; set; }
    }
}

UploadFileModel.cs 每次上传文件的时候，前台都会传递这些参数给服务器，服务器可以根据参数做相应的处理

using System;
using Microsoft.AspNetCore.Mvc;
 
namespace signalr.Model
{
    /// 
    /// WebUploader上传文件实体类
    /// 
    [Serializable]
    public class UploadFileModel
    {
        /// 
        /// 前台WebUploader的ID
        /// 
        public string Id { get; set; }
        /// 
        /// 当前文件（块）的前端计算的md5
        /// 
        public string FileMd5 { get; set; }
        /// 
        /// 当前文件块号
        /// 
        public string Chunk { get; set; }
        /// 
        /// 原始文件名
        /// 
        public string Name { get; set; }
        /// 
        /// 文件类型（如：image/png）
        /// 
        [FromForm(Name = "type")]
        public string FileType { get; set; }
        /// 
        /// 当前文件（块）的大小
        /// 
        public long? Size { get; set; }
        /// 
        /// 前台给此文件分配的唯一编号
        /// 
        public string Guid { get; set; }
        /// 
        /// 附件信息
        /// 
        public FormData FromData { get; set; }
        /// 
        /// Post过来的数据容器
        /// 
        public byte[] FileData { get; set; }
    }
}

UploadFileMergeModel.cs 当所有块传输完成后，传递给后台一个合并文件的请求，后台通过参数中的信息把分块保存的文件合并成一个完整的文件

namespace signalr.Model
{
    /// 
    /// 文件合并请求参数类
    /// 
    public class UploadFileMergeModel
    {
        /// 
        /// 请求类型
        /// 
        public string CheckType { get; set; }
        /// 
        /// 前台检测到的文件大小
        /// 
        public long? FileSize { get; set; }
        /// 
        /// 前台返回文件总块数
        /// 
        public int? ChunkNumber { get; set; }
        /// 
        /// 前台返回文件的md5值
        /// 
        public string FileMd5 { get; set; }
        /// 
        /// 前台返回上传文件唯一标识
        /// 
        public string FileName { get; set; }
        /// 
        /// 文件扩展名，不包含.
        /// 
        public string FileExt { get; set; }
    }
}

为了实现【秒传】和分块传输时的【断点续传】功能，我们在Class目录中定义一个UploadFileList.cs类，用来模拟持久化保存服务器所接收到的文件MD5校验列表和已接收的分块MD5值信息，这里我们使用了并发线程安全的ConcurrentDictionary和ConcurrentBag

using System;
using System.Collections.Concurrent;
 
namespace signalr.Class
{
    public class UploadFileList
    {
        private static readonly Lazystring, string>> _serverUploadFileList = new Lazystring, string>>();
        private static readonly Lazystring, ConcurrentBag<string>>> _uploadChunkFileList =
            new Lazystring, ConcurrentBag<string>>>();
        public UploadFileList()
        {
            ServerUploadFileList = _serverUploadFileList;
            UploadChunkFileList = _uploadChunkFileList;
        }
 
        /// 
        /// 服务器上已经存在的文件，key为文件的Md5,value为文件路径
        /// 
        public readonly Lazystring, string>> ServerUploadFileList;
        /// 
        /// 客户端分配上传文件时的记录信息，key为上传文件的唯一id，value为文件分片后的当前段的md5
        /// 
        public readonly Lazystring, ConcurrentBag<string>>> UploadChunkFileList;
    }
}

扩展一下HubInterface/IChatClient.cs 用来推送给前台展示后台处理的信息

public interface IChatClient
    {
        /// 
        /// 客户端接收数据触发函数名
        /// 
        /// 消息实体类
        /// 
        Task ReceiveMessage(ClientMessageModel clientMessageModel);
        /// 
        /// Echart接收数据触发函数名
        /// 
        /// JSON格式的可以被Echarts识别的data数据
        /// 
        Task EchartsMessage(Array data);
        /// 
        /// 客户端获取自己登录后的UID
        /// 
        /// 消息实体类
        /// 
        Task GetMyId(ClientMessageModel clientMessageModel);
        /// 
        /// 上传成功后服务器处理数据时通知前台的信息内容
        /// 
        /// 消息实体类
        /// 
        Task UploadInfoMessage(ClientMessageModel clientMessageModel);
    }

扩展一下Class/ClientMessageModel.cs

    /// 
    /// 服务端发送给客户端的信息
    /// 
    [Serializable]
    public class ClientMessageModel
    {
        /// 
        /// 接收用户编号
        /// 
        public string UserId { get; set; }
        /// 
        /// 组编号
        /// 
        public string GroupName { get; set; }
        /// 
        /// 发送的内容
        /// 
        public string Context { get; set; }
        /// 
        /// 自定义的响应编码
        /// 
        public string Code { get; set; }
    }

我们在Startup.cs中注入上传文件的配置，同时把前文的XSRF防护去掉，我们在前台请求的时候带上防护认证信息。

public void ConfigureServices(IServiceCollection services)
        {
            services.AddSignalR();
            services.AddRazorPages()
            services.AddSingleton();//服务器上传的文件信息保存在内存中
            services.AddOptions()
                .Configure(Configuration.GetSection("FileUpload"));//服务器上传文件配置
        }

在项目的wwwroot/js下新建一个uploader.js

"use strict";
var connection = new signalR.HubConnectionBuilder()
    .withUrl("/chatHub")
    .withAutomaticReconnect()
    .configureLogging(signalR.LogLevel.Debug)
    .build();
var user = "";
 
connection.on("GetMyId", function (data) {
    user = data.userId;
});
connection.on("ReceiveMessage", function (data) {
    console.log(data.userId + data.context);
});
 
connection.on("UploadInfoMessage", function (data) {
    switch (data.code) {
    case "200":
        $('.modal-body').append($("
" + data.context + "
"));//当后台返回处理完成或出错时，前台显示内容，同时显示关闭按钮
        $(".modal-content").append($("
Close
"));
        break;
    case "300":
    case "500":
        $('.modal-body').append($("
" + data.context + "
"));//展示后台返回信息
        break;
    case "400":
        if ($("#process").length == 0) {//展示后台推送的文件处理进度
            $('.modal-body').append($("
" + data.context + "
"));
        }
        $('#process').text(data.context);
        break;
    }
});
 
connection.start().then(function () {
    console.log("服务器已连接");
}).catch(function (err) {
    return console.error(err.toString());
});

 在项目的Pages/Shared中新建一个Razor布局页_LayoutUpload.cshtml

html>
 
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/lib/webuploader/dist/webuploader.css" />
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.min.js">script>
    <script type="text/javascript" src="~/lib/webuploader/dist/webuploader.js">script>
    <script type="text/javascript" src="~/lib/bootstrap/dist/js/bootstrap.min.js">script>
    <title>@ViewBag.Titletitle>
    @await RenderSectionAsync("Scripts", required: false)
head>
<body>
@RenderBody()
body>
html>

在Pages目录下新建一个upload目录，然后在它下面新建一个index.cshtml，这个文件中实现了Webuploader中我们所要使用的事件监测、文件上传功能。

1 @page "{handler?}"
  2 @model MediatRStudy.Pages.upload.IndexModel
  3 @{
  4     ViewBag.Title = "WebUploader";
  5     Layout = "_LayoutUpload";
  6 }
  7 @section Scripts
  8 {
  9 <script src="~/js/signalr/dist/browser/signalr.js">script>
 10 <script src="~/js/uploader.js">script>
 11 
 12 <script>
 13     // 每次分片文件大小限制为5M
 14     var chunkSize = 5 * 1024 * 1024;
 15     // 全部文件限制10G大小
 16     var fileTotalSize = 10 * 1024 * 1024 * 1024;
 17     // 单文件限制5G大小
 18     var fileSingleSize = 5 * 1024 * 1024 * 1024;
 19     jQuery(function() {
 20         var $ = jQuery,
 21             $list = $('#thelist'),
 22             $btn = $('#ctlBtn'),
 23             state = 'pending',
 24             md5s = {},//分块传输时的各个块的md5值
 25             dataState,//当前状态
 26             Token,//可以做用户验证
 27             uploader;//webUploader的实例
 28         var fileExt = ["zip", "rar"];//允许上传的类型
 29         Token = '@ViewData["Token"]';
 30         if (Token == '' || Token == 'undefined') {
 31             $("#uploader").hide();
 32             alert("登录超时，请重新登录。");
 33         }
 34  35  36  37  38         //注册Webuploader要监听的上传文件时的三个事件
 39         //before-send-file 在执行文件上传前先执行这个；before-send在开始往服务器发送文件前执行；after-send-file所有文件上传完毕后执行
 40 
 41         window.WebUploader.Uploader.register({
 42                 "before-send-file": "beforeSendFile",
 43                 "before-send": "beforeSend",
 44                 "after-send-file": "afterSendFile"
 45             },
 46             {
 47                 //第一步，开始上传前校验文件，并传递给服务器当前文件的MD5，服务器可根据MD5来实现类似秒传效果
 48                 beforeSendFile: function(file) {
 49                     var owner = this.owner;
 50                     md5s.length = 0;
 51                     var deferred = window.WebUploader.Deferred();
 52                     owner.md5File(file, 0, file.size)
 53                         .progress(function(percentage) {
 54                             console.log("文件MD5计算进度：", percentage);
 55                         })
 56                         .fail(function() {
 57                             deferred.reject();
 58                             console.log("文件MD5获取失败");
 59                         })
 60                         .then(function(md5) {
 61                             console.log("文件MD5：", md5);
 62                             file.md5 = md5;
 63                             var params = {
 64                                 "checktype": "whole",
 65                                 "filesize": file.size,
 66                                 "filemd5": md5
 67                                 ,"filename":file.name
 68                                 ,"fileguid":file.guid
 69                             };
 70                             $.ajax({
 71                                 url: '/upload/FileWhole', //通过md5校验实现文件秒传
 72                                 type: 'POST',
 73                                 headers: {//请求的时候传递进去防CSRF攻击的认证信息
 74                                     RequestVerificationToken:
 75                                         $('input:hidden[name="__RequestVerificationToken"]').val()
 76                                 },
 77                                 data: params,
 78                                 contentType: 'application/x-www-form-urlencoded',
 79                                 async: true, // 开启异步请求
 80                                 dataType: 'JSON',
 81                                 success: function(data) {
 82                                     data = (typeof data) == 'string' ? JSON.parse(data) : data;
 83                                     if (data.code != '200') {
 84                                         dataState = data;
 85                                         //服务器返回错误信息
 86                                         alert('错误：' + data.msg);
 87                                         deferred.reject();//取消后续上传
 88                                     }
 89                                     if (data.isExist) {
 90                                         // 跳过当前文件并标记文件状态为上传完成
 91                                         dataState = data;
 92                                         owner.skipFile(file, window.WebUploader.File.Status.COMPLETE);
 93                                         deferred.resolve();
 94                                         $('#' + file.id).find('p.state').text('上传成功【秒传】');
 95 
 96                                     } else {
 97                                         deferred.resolve();
 98                                     }
 99                                 },
100                                 error: function(xhr, status) {
101                                     $('#' + file.id).find('p.state').text('上传失败：'+status);
102                                     console.log("上传失败：", status);
103                                 }
104                             });
105                         });
106 
107                     return deferred.promise();
108                 },
109                 //上传事件第二步：分块上传时，每个分块触发上传前执行
110                 beforeSend: function(block) {
111                     var deferred = window.WebUploader.Deferred();
112                     var owner = this.owner;
113                     owner.md5File(block.file, block.start, block.end)
114                         .progress(function(percentage) {
115                             console.log("当前分块内容的MD5计算进度：", percentage);
116                         })
117                         .fail(function() {
118                             deferred.reject();
119                         })
120                         .then(function(md5) {
121                             //计算当前块的MD5值并写入数组
122                             md5s[block.blob.uid] = md5;
123                             deferred.resolve();
124                         });
125                     return deferred.promise();
126                 },
127                 //时间点3：所有分块上传成功后调用此函数
128                 afterSendFile: function(file) {
129                     var deferred = $.Deferred();
130                     $('#' + file.id).find('p.state').text('执行最后一步');
131                     console.log(file);
132                     if (file.skipped) {
133                         deferred.resolve();
134                         console.log("执行服务器合并分块文件操作");
135                         return deferred.promise();
136                     }
137                     var chunkNumber = Math.ceil(file.size / chunkSize);//总块数
138                     var params = {
139                         "checktype": "merge",
140                         "filesize": file.size,
141                         "chunknumber": chunkNumber,
142                         "filemd5": file.md5,
143                         "filename": file.guid,
144                         "fileext": file.ext//扩展名
145                     };
146                     $.ajax({
147                         type: "POST",
148                         url: "/upload/FileMerge",
149                         headers: {
150                             RequestVerificationToken:
151                                 $('input:hidden[name="__RequestVerificationToken"]').val(),
152                             userid:user //传递SignalR分配的编号
153                         },
154                         data: params,
155                         async: true,
156                         success: function(response) {
157                             if (response.code == 200) {
158                                 //服务器合并完成分块传输的文件后执行
159                                 dataState = response;
160                                 $("#myModal").modal('show');
161                             } else {
162                                 alert(response.msg);
163                             }
164                             deferred.resolve();
165                         },
166                         error: function() {
167                             dataState = undefined;
168                             deferred.reject();
169                         }
170                     });
171                     return deferred.promise();
172                 }
173             });
174         uploader = window.WebUploader.create({
175             resize: false,
176             fileNumLimit: 1,
177             swf: '/lib/webuploader/dist/Uploader.swf',
178             server: '/upload/FileSave',
179             pick: { id: '#picker', multiple: false },
180             chunked: true,
181             chunkSize: chunkSize,
182             chunkRetry: 3,
183             fileSizeLimit: fileTotalSize,
184             fileSingleSizeLimit: fileSingleSize,
185             formData: {
186             }
187         });
188         uploader.on('beforeFileQueued',
189             function(file) {
190                 var isAdd = false;
191                 for (var i = 0; i < fileExt.length; i++) {
192                     if (file.ext == fileExt[i]) {
193                         file.guid = window.WebUploader.Base.guid();
194                         isAdd = true;
195                         break;
196                     }
197                 }
198                 return isAdd;
199             });
200         //每次上传前，如果分块传输，则带上分块信息参数
201         uploader.on('uploadBeforeSend',
202             function(block, data, headers) {
203                 var params = {
204                     "checktype": "chunk",
205                     "filesize": block.file.size,
206                     "fileid": block.blob.ruid,
207                     "chunksize": block.blob.size,
208                     "chunkindex": block.chunk,
209                     "chunkstart": block.start,
210                     "chunkend": block.end,
211                     "chunkcount": block.chunks,
212                     "chunkid": block.blob.uid,
213                     "md5": md5s[block.blob.uid]
214                 };
215                 data.formData = JSON.stringify(params);
216 
217                 headers.Authorization = Token;
218                 headers.RequestVerificationToken = $('input:hidden[name="__RequestVerificationToken"]').val();
219                 data.guid = block.file.guid;
220             });
221         // 当有文件添加进来的时候
222         uploader.on('fileQueued',
223             function(file) {
224                 $list.append('
225                     file.id +
226                     '" class="item">' +
227                     '
' +
228                     file.name +
229                     '' +
230                     '
231                     file.id +
232                     '" value="' +
233                     file.guid +
234                     '" />' +
235                     '
等待上传...
' +
236                     '
');