ASP.NET CORE使用WebUploader对大文件分片上传，并通过ASP.NET CORE SignalR实时反馈后台处理进度给前端展示

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

在前端上传文件的组件选择上，采用了WebUploader(http://fex.baidu.com/webuploader/)这个优秀的前端组件，下面是来自它的官网介绍：

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

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

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

阅读参考此文章前，请先看一下https://www.cnblogs.com/wdw984/p/14645614.html

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

在正式使用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
{
    /// <summary>
    /// 上传文件配置类
    /// </summary>
    [Serializable]
    public class FileUploadConfig
    {
        /// <summary>
        /// 临时文件夹目录名
        /// </summary>
        public string TempPath { get; set; }
        /// <summary>
        /// 上传文件保存目录名
        /// </summary>
        public string FileDir { get; set; }
        /// <summary>
        /// 允许上传的文件扩展名
        /// </summary>
        public string FileExt { get; set; }
    }
}

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

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

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

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

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

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

using System;

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

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

using System;
using Microsoft.AspNetCore.Mvc;

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

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

namespace signalr.Model
{
    /// <summary>
    /// 文件合并请求参数类
    /// </summary>
    public class UploadFileMergeModel
    {
        /// <summary>
        /// 请求类型
        /// </summary>
        public string CheckType { get; set; }
        /// <summary>
        /// 前台检测到的文件大小
        /// </summary>
        public long? FileSize { get; set; }
        /// <summary>
        /// 前台返回文件总块数
        /// </summary>
        public int? ChunkNumber { get; set; }
        /// <summary>
        /// 前台返回文件的md5值
        /// </summary>
        public string FileMd5 { get; set; }
        /// <summary>
        /// 前台返回上传文件唯一标识
        /// </summary>
        public string FileName { get; set; }
        /// <summary>
        /// 文件扩展名，不包含.
        /// </summary>
        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 Lazy<ConcurrentDictionary<string, string>> _serverUploadFileList = new Lazy<ConcurrentDictionary<string, string>>();
        private static readonly Lazy<ConcurrentDictionary<string, ConcurrentBag<string>>> _uploadChunkFileList =
            new Lazy<ConcurrentDictionary<string, ConcurrentBag<string>>>();
        public UploadFileList()
        {
            ServerUploadFileList = _serverUploadFileList;
            UploadChunkFileList = _uploadChunkFileList;
        }

        /// <summary>
        /// 服务器上已经存在的文件，key为文件的Md5,value为文件路径
        /// </summary>
        public readonly Lazy<ConcurrentDictionary<string, string>> ServerUploadFileList;
        /// <summary>
        /// 客户端分配上传文件时的记录信息，key为上传文件的唯一id，value为文件分片后的当前段的md5
        /// </summary>
        public readonly Lazy<ConcurrentDictionary<string, ConcurrentBag<string>>> UploadChunkFileList;
    }
}

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

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

扩展一下Class/ClientMessageModel.cs

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

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

public void ConfigureServices(IServiceCollection services)
        {
            services.AddSignalR();
            services.AddRazorPages()
            services.AddSingleton<UploadFileList>();//服务器上传的文件信息保存在内存中
            services.AddOptions()
                .Configure<FileUploadConfig>(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($("<p>" + data.context + "</p>"));//当后台返回处理完成或出错时，前台显示内容，同时显示关闭按钮
        $(".modal-content").append($("<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button></div>"));
        break;
    case "300":
    case "500":
        $('.modal-body').append($("<p>" + data.context + "</p>"));//展示后台返回信息
        break;
    case "400":
        if ($("#process").length == 0) {//展示后台推送的文件处理进度
            $('.modal-body').append($("<p id='process'>" + data.context + "</p>"));
        }
        $('#process').text(data.context);
        break;
    }
});

connection.start().then(function () {
    console.log("服务器已连接");
}).catch(function (err) {
    return console.error(err.toString());
});

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

<!DOCTYPE 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.Title</title>
    @await RenderSectionAsync("Scripts", required: false)
</head>
<body>
@RenderBody()
</body>
</html>

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

@page "{handler?}"
@model MediatRStudy.Pages.upload.IndexModel
@{
    ViewBag.Title = "WebUploader";
    Layout = "_LayoutUpload";
}
@section Scripts
{
<script src="~/js/signalr/dist/browser/signalr.js"></script>
<script src="~/js/uploader.js"></script>

<script>
    // 每次分片文件大小限制为5M
    var chunkSize = 5 * 1024 * 1024;
    // 全部文件限制10G大小
    var fileTotalSize = 10 * 1024 * 1024 * 1024;
    // 单文件限制5G大小
    var fileSingleSize = 5 * 1024 * 1024 * 1024;
    jQuery(function() {
        var $ = jQuery,
            $list = $('#thelist'),
            $btn = $('#ctlBtn'),
            state = 'pending',
            md5s = {},//分块传输时的各个块的md5值
            dataState,//当前状态
            Token,//可以做用户验证
            uploader;//webUploader的实例
        var fileExt = ["zip", "rar"];//允许上传的类型
        Token = '@ViewData["Token"]';
        if (Token == '' || Token == 'undefined') {
            $("#uploader").hide();
            alert("登录超时，请重新登录。");
        }
 35  36  37  38         //注册Webuploader要监听的上传文件时的三个事件
        //before-send-file 在执行文件上传前先执行这个；before-send在开始往服务器发送文件前执行；after-send-file所有文件上传完毕后执行

        window.WebUploader.Uploader.register({
                "before-send-file": "beforeSendFile",
                "before-send": "beforeSend",
                "after-send-file": "afterSendFile"
            },
            {
                //第一步，开始上传前校验文件，并传递给服务器当前文件的MD5，服务器可根据MD5来实现类似秒传效果
                beforeSendFile: function(file) {
                    var owner = this.owner;
                    md5s.length = 0;
                    var deferred = window.WebUploader.Deferred();
                    owner.md5File(file, 0, file.size)
                        .progress(function(percentage) {
                            console.log("文件MD5计算进度：", percentage);
                        })
                        .fail(function() {
                            deferred.reject();
                            console.log("文件MD5获取失败");
                        })
                        .then(function(md5) {
                            console.log("文件MD5：", md5);
                            file.md5 = md5;
                            var params = {
                                "checktype": "whole",
                                "filesize": file.size,
                                "filemd5": md5
                                ,"filename":file.name
                                ,"fileguid":file.guid
                            };
                            $.ajax({
                                url: '/upload/FileWhole', //通过md5校验实现文件秒传
                                type: 'POST',
                                headers: {//请求的时候传递进去防CSRF攻击的认证信息
                                    RequestVerificationToken:
                                        $('input:hidden[name="__RequestVerificationToken"]').val()
                                },
                                data: params,
                                contentType: 'application/x-www-form-urlencoded',
                                async: true, // 开启异步请求
                                dataType: 'JSON',
                                success: function(data) {
                                    data = (typeof data) == 'string' ? JSON.parse(data) : data;
                                    if (data.code != '200') {
                                        dataState = data;
                                        //服务器返回错误信息
                                        alert('错误：' + data.msg);
                                        deferred.reject();//取消后续上传
                                    }
                                    if (data.isExist) {
                                        // 跳过当前文件并标记文件状态为上传完成
                                        dataState = data;
                                        owner.skipFile(file, window.WebUploader.File.Status.COMPLETE);
                                        deferred.resolve();
                                        $('#' + file.id).find('p.state').text('上传成功【秒传】');

                                    } else {
                                        deferred.resolve();
                                    }
                                },
                                error: function(xhr, status) {
                                    $('#' + file.id).find('p.state').text('上传失败：'+status);
                                    console.log("上传失败：", status);
                                }
                            });
                        });

                    return deferred.promise();
                },
                //上传事件第二步：分块上传时，每个分块触发上传前执行
                beforeSend: function(block) {
                    var deferred = window.WebUploader.Deferred();
                    var owner = this.owner;
                    owner.md5File(block.file, block.start, block.end)
                        .progress(function(percentage) {
                            console.log("当前分块内容的MD5计算进度：", percentage);
                        })
                        .fail(function() {
                            deferred.reject();
                        })
                        .then(function(md5) {
                            //计算当前块的MD5值并写入数组
                            md5s[block.blob.uid] = md5;
                            deferred.resolve();
                        });
                    return deferred.promise();
                },
                //时间点3：所有分块上传成功后调用此函数
                afterSendFile: function(file) {
                    var deferred = $.Deferred();
                    $('#' + file.id).find('p.state').text('执行最后一步');
                    console.log(file);
                    if (file.skipped) {
                        deferred.resolve();
                        console.log("执行服务器合并分块文件操作");
                        return deferred.promise();
                    }
                    var chunkNumber = Math.ceil(file.size / chunkSize);//总块数
                    var params = {
                        "checktype": "merge",
                        "filesize": file.size,
                        "chunknumber": chunkNumber,
                        "filemd5": file.md5,
                        "filename": file.guid,
                        "fileext": file.ext//扩展名
                    };
                    $.ajax({
                        type: "POST",
                        url: "/upload/FileMerge",
                        headers: {
                            RequestVerificationToken:
                                $('input:hidden[name="__RequestVerificationToken"]').val(),
                            userid:user //传递SignalR分配的编号
                        },
                        data: params,
                        async: true,
                        success: function(response) {
                            if (response.code == 200) {
                                //服务器合并完成分块传输的文件后执行
                                dataState = response;
                                $("#myModal").modal('show');
                            } else {
                                alert(response.msg);
                            }
                            deferred.resolve();
                        },
                        error: function() {
                            dataState = undefined;
                            deferred.reject();
                        }
                    });
                    return deferred.promise();
                }
            });
        uploader = window.WebUploader.create({
            resize: false,
            fileNumLimit: 1,
            swf: '/lib/webuploader/dist/Uploader.swf',
            server: '/upload/FileSave',
            pick: { id: '#picker', multiple: false },
            chunked: true,
            chunkSize: chunkSize,
            chunkRetry: 3,
            fileSizeLimit: fileTotalSize,
            fileSingleSizeLimit: fileSingleSize,
            formData: {
            }
        });
        uploader.on('beforeFileQueued',
            function(file) {
                var isAdd = false;
                for (var i = 0; i < fileExt.length; i++) {
                    if (file.ext == fileExt[i]) {
                        file.guid = window.WebUploader.Base.guid();
                        isAdd = true;
                        break;
                    }
                }
                return isAdd;
            });
        //每次上传前，如果分块传输，则带上分块信息参数
        uploader.on('uploadBeforeSend',
            function(block, data, headers) {
                var params = {
                    "checktype": "chunk",
                    "filesize": block.file.size,
                    "fileid": block.blob.ruid,
                    "chunksize": block.blob.size,
                    "chunkindex": block.chunk,
                    "chunkstart": block.start,
                    "chunkend": block.end,
                    "chunkcount": block.chunks,
                    "chunkid": block.blob.uid,
                    "md5": md5s[block.blob.uid]
                };
                data.formData = JSON.stringify(params);

                headers.Authorization = Token;
                headers.RequestVerificationToken = $('input:hidden[name="__RequestVerificationToken"]').val();
                data.guid = block.file.guid;
            });
        // 当有文件添加进来的时候
        uploader.on('fileQueued',
            function(file) {
                $list.append('<div id="' +
                    file.id +
                    '" class="item">' +
                    '<h4 class="info">' +
                    file.name +
                    '</h4>' +
                    '<input type="hidden" id="h_' +
                    file.id +
                    '" value="' +
                    file.guid +
                    '" />' +
                    '<p class="state">等待上传...</p>' +
                    '</div>');
            });

        // 文件上传过程中创建进度条实时显示。
        uploader.on('uploadProgress',
            function(file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');
                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style=" 0%">' +
                        '</div>' +
                        '</div>').appendTo($li).find('.progress-bar');
                }
                $li.find('p.state').text('上传中');

                $percent.css('width', percentage * 100 + '%');
            });

        uploader.on('uploadSuccess',
            function(file) {
                if (dataState == undefined) {
                    $('#' + file.id).find('p.state').text('上传失败');
                    $('#' + file.id).find('button').remove();
                    $('#' + file.id).find('p.state').before('<button id="retry" type="button" class="btn btn-primary fright retry pbtn">重新上传</button>');
                    file.setStatus('error');
                    return;
                }
                if (dataState.success == true) {
                    if (dataState.miaochuan == true) {
                        $('#' + file.id).find('p.state').text('上传成功[秒传]');
                    } else {
                        $('#' + file.id).find('p.state').text('上传成功');
                    }
                    $('#' + file.id).find('button').remove();
                    return;

                } else {
                    $('#' + file.id).find('p.state').text('服务器未能成功接收，状态：' + dataState.success);
                    return;
                }
            });

        uploader.on('uploadError',
            function(file) {
                $('#' + file.id).find('p.state').text('上传出错');
            });
        //分块传输后，可以在这个事件中获取到服务器返回的信息，同时这里可以实现文件续传（块文件的MD5存在时，后台可以跳过保存步骤）
        uploader.on('uploadAccept',
            function(file, response, reject) {
                if (response.code !== 200) {
                    alert("上传出错：" + response.msg);
                    return false;
                }
                return true;
            });
        uploader.on('uploadComplete',
            function(file) {
                $('#' + file.id).find('.progress').fadeOut();
            });

        uploader.on('all',
            function(type) {
                if (type === 'startUpload') {
                    state = 'uploading';
                } else if (type === 'stopUpload') {
                    state = 'paused';
                } else if (type === 'uploadFinished') {
                    state = 'done';
                }
                if (state === 'done') {
                    $btn.text('继续上传');
                } else if (state === 'uploading') {
                    $btn.text('暂停上传');
                } else {
                    $btn.text('开始上传');
                }
            });
        $btn.on('click',
            function() {
                if (state === 'uploading') {
                    uploader.stop();
                } else if (state == 'done') {
                    window.location.reload();
                } else {
                    uploader.upload();
                }
            });
    });
</script>
}
<div class="container">
    <div class="row">
        <div id="uploader" class="wu-example">
            <span style="color: red">请上传压缩包</span>
            <div class="form-group" id="thelist">
            </div>
            <div class="form-group">
                <form method="post">
                    <div id="picker" class="webuploader-container">
                        <div class="webuploader-pick">选择文件</div>
                        <div style="position: absolute; top: 0; left: 0;  88px; height: 34px; overflow: hidden; bottom: auto; right: auto;">
                            <input type="file" name="file" class="webuploader-element-invisible" />
                            <label style="-ms-opacity: 0; opacity: 0;  100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
                        </div>
                    </div>
                    <button id="ctlBtn" class="btn btn-success" type="button">开始上传</button>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" style="display: none;" data-backdrop="static" aria-hidden="true">
    <div class="modal-dialog modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalScrollableTitle">正在处理。。。</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        
                </button>
            </div>
            <div class="modal-body">
                <p>服务器正在处理数据，请不要关闭和刷新此页面。</p>
            </div>
        </div>
    </div>
</div>

index.cshtml的代码文件如下

本示例只能解压缩zip文件，并且密码是123456，友情提示，不要用QQ浏览器调试，否则会遇到选择文件后DEBUG停止运行。

本示例只能解压缩zip文件，并且密码是123456，友情提示，不要用QQ浏览器调试，否则会遇到选择文件后DEBUG停止运行。

本示例只能解压缩zip文件，并且密码是123456，友情提示，不要用QQ浏览器调试，否则会遇到选择文件后DEBUG停止运行。 

using ICSharpCode.SharpZipLib.Zip;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.SignalR;
using Microsoft.Extensions.Options;
using signalr.Class;
using signalr.HubInterface;
using signalr.Hubs;
using signalr.Model;
using System;
using System.Collections.Concurrent;
using System.Diagnostics;
using System.IO;
using System.Linq;
using System.Text.Json;
using System.Threading.Tasks;

namespace signalr.Pages.upload
{
    public class IndexModel : PageModel
    {
        private readonly IOptionsSnapshot<FileUploadConfig> _fileUploadConfig;
        private readonly IOptionsSnapshot<UploadFileList> _fileList;
        private readonly string[] _fileExt;
        private readonly IHubContext<ChatHub, IChatClient> _hubContext;
        public IndexModel(IOptionsSnapshot<FileUploadConfig> fileUploadConfig, IOptionsSnapshot<UploadFileList> fileList, IHubContext<ChatHub, IChatClient> hubContext)
        {
            _fileUploadConfig = fileUploadConfig;
            _fileList = fileList;
            _fileExt = _fileUploadConfig.Value.FileExt.Split(',').ToArray();
            _hubContext = hubContext;
        }
        public IActionResult OnGet()
        {
            ViewData["Token"] = "666";
            return Page();
        }

        #region 上传文件

        /// <summary>
        /// 上传文件
        /// </summary>
        /// <returns></returns>
        public async Task<JsonResult> OnPostFileSaveAsync(IFormFile file, UploadFileModel model)
        {
            if (_fileUploadConfig.Value == null)
            {
                return new JsonResult(new { code = 400, msg = "服务器配置不正确" });
            }

            if (file == null || file.Length < 1)
            {
                return new JsonResult(new { code = 404, msg = "没有接收到要保存的文件" });
            }
            Request.EnableBuffering();
            var formData = Request.Form["formData"];
            if (model == null || string.IsNullOrWhiteSpace(formData))
            {
                return new JsonResult(new { code = 401, msg = "没有接收到必要的参数" });
            }

            var request = model;
            long.TryParse(Request.Form["size"], out var fileSize);
            request.Size = fileSize;
            try
            {
                request.FromData = JsonSerializer.Deserialize<FormData>(formData, new JsonSerializerOptions { PropertyNameCaseInsensitive = true });
            }
            catch (Exception e)
            {
                Debug.WriteLine(e);
            }

            if (request.FromData == null)
            {
                return new JsonResult(new { code = 402, msg = "参数错误" });
            }

#if DEBUG
            Debug.WriteLine($"原文件名：{request.Name},文件编号：{request.Guid},文件块编号：{request.Chunk},文件Md5：{request.FileMd5},当前块UID：{request.FromData?.Chunkid},当前块MD5：{request.FromData?.Md5}");
#endif
            var fileExt = request.Name.Substring(request.Name.LastIndexOf('.') + 1).ToLowerInvariant();
            if (!_fileExt.Contains(fileExt))
            {
                return new JsonResult(new { code = 403, msg = "文件类型不在允许范围内" });
            }
            if (_fileList.Value.UploadChunkFileList.Value.ContainsKey(request.Guid))
            {
                if (!_fileList.Value.UploadChunkFileList.Value[request.Guid].Any(x => string.Equals(x, request.FromData.Md5, StringComparison.OrdinalIgnoreCase)))
                {
                    _fileList.Value.UploadChunkFileList.Value[request.Guid].Add(request.FromData.Md5);
                }
#if DEBUG
                else
                {
                    Debug.WriteLine($"ContainsKey{request.FromData.Chunkindex}存在校验值{request.FromData.Md5}");
                    return new JsonResult(new { code = 200, msg = "成功接收", miaochuan = true });
                }
#endif
            }
            else
            {
                return new JsonResult(new { code = 405, msg = "接收失败,因为服务器没有找到此文件的容器,请重新上传" });
            }

            var dirPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, _fileUploadConfig.Value.TempPath, request.Guid);
            if (!Directory.Exists(dirPath))
            {
                Directory.CreateDirectory(dirPath);
            }

            var tempFile = string.Concat(dirPath, "\", request.FromData.Chunkindex.ToString().PadLeft(4, '0'), ".", fileExt);
            try
            {

                await using var fs = System.IO.File.OpenWrite(tempFile);
                request.FileData = new byte[Convert.ToInt32(request.FromData.Chunksize ?? 0)];

                await using var memStream = new MemoryStream();
                await file.CopyToAsync(memStream);

                request.FileData = memStream.ToArray();

                await fs.WriteAsync(request.FileData, 0, request.FileData.Length);
                await fs.FlushAsync();
            }
            catch (Exception e)
            {
#if DEBUG
                Debug.WriteLine($"White Error:{e}");
#endif
                _fileList.Value.UploadChunkFileList.Value.TryRemove(request.Guid, out _);
            }
            return new JsonResult(new { code = 200, msg = "成功接收", miaochuan = false });
        }

        #endregion

        #region 合并上传文件

        /// <summary>
        /// 合并分片上传的文件
        /// </summary>
        /// <param name="mergeModel">前台传递的请求合并的参数</param>
        /// <returns></returns>
        public async Task<JsonResult> OnPostFileMergeAsync(UploadFileMergeModel mergeModel)
        {
            return await Task.Run(async () =>
            {
                if (mergeModel == null || string.IsNullOrWhiteSpace(mergeModel.FileName) ||
                    string.IsNullOrWhiteSpace(mergeModel.FileMd5))
                {
                    return new JsonResult(new { code = 300, success = false, count = 0, size = 0, msg = "合并失败，参数不正确。" });
                }
                if (!_fileExt.Contains(mergeModel.FileExt.ToLowerInvariant()))
                {
                    return new JsonResult(new { code = 403, success = false, msg = "文件类型不在允许范围内" });
                }

                var fileSavePath = "";
                if (!_fileList.Value.ServerUploadFileList.Value.ContainsKey(mergeModel.FileMd5))
                {
                    //合并块文件、删除临时文件
                    var chunks = Directory.GetFiles(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, _fileUploadConfig.Value.TempPath, mergeModel.FileName), "*.*");
                    if (!chunks.Any())
                    {
                        return new JsonResult(new { code = 302, success = false, count = 0, size = 0, msg = "未找到文件块信息，请重试。" });
                    }
                    var dirPath = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, _fileUploadConfig.Value.FileDir);
                    if (!Directory.Exists(dirPath))
                    {
                        Directory.CreateDirectory(dirPath);
                    }
                    fileSavePath = Path.Combine(_fileUploadConfig.Value.FileDir,
                        string.Concat(mergeModel.FileName, ".", mergeModel.FileExt));
                    await using var fs =
                        new FileStream(Path.Combine(dirPath, string.Concat(mergeModel.FileName, ".", mergeModel.FileExt)), FileMode.Create);
                    foreach (var file in chunks.OrderBy(x => x))
                    {
                        //Debug.WriteLine($"File==>{file}");
                        var bytes = await System.IO.File.ReadAllBytesAsync(file);
                        await fs.WriteAsync(bytes.AsMemory(0, bytes.Length));
                    }
                    //Directory.Delete(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, _fileUploadConfig.Value.TempPath, mergeModel.FileName), true);


                    if (!_fileList.Value.ServerUploadFileList.Value.TryAdd(mergeModel.FileMd5, fileSavePath))
                    {
                        return new JsonResult(new { code = 301, success = false, count = 0, size = 0, msg = "服务器保存文件失败，请重试。" });
                    }
                }
                var user = Request.Headers["userid"];
                //调用解压文件
                if (string.Equals(mergeModel.FileExt.ToLowerInvariant(), "zip"))
                {
                    DoUnZip(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, fileSavePath), user.ToString());
                }
                else
                {
                    await SentMessage(user.ToString(), "服务器只能解压缩zip格式文件。", "200");
                }
                return new JsonResult(new { code = 200, success = true, count = 0, size = 0, msg = "上传成功", url = fileSavePath });
            });

        }

        #endregion

        #region 文件秒传检测、文件类型允许范围检测
        public JsonResult OnPostFileWholeAsync(UploadFileWholeModel model)
        {
            if (model == null || string.IsNullOrWhiteSpace(model.FileMd5))
            {
                return new JsonResult(new { Code = 300, IsExist = false, success = false, FileUrl = "", Msg = "参数不正确" });
            }
            var fileExt = model.FileName.Substring(model.FileName.LastIndexOf('.') + 1).ToLowerInvariant();
            if (!_fileExt.Contains(fileExt))
            {
                return new JsonResult(new { code = 403, success = false, msg = "文件类型不在允许范围内" });
            }
            if (_fileList.Value.ServerUploadFileList.Value.ContainsKey(model.FileMd5))
            {
                return new JsonResult(new { Code = 200, IsExist = true, success = true, FileUrl = _fileList.Value.ServerUploadFileList.Value[model.FileMd5], miaochuan = true });
            }
            //检测的时候创建待上传文件的分块MD5容器
            _fileList.Value.UploadChunkFileList.Value.TryAdd(model.FileGuid, new ConcurrentBag<string>());

            return new JsonResult(new { Code = 200, IsExist = false, FileUrl = "" });
        }
        #endregion

        #region 文件块秒传检测
        public JsonResult OnPostFileChunkAsync(UploadFileChunkModel model)
        {
            if (model == null || string.IsNullOrWhiteSpace(model.Md5) || string.IsNullOrWhiteSpace(model.FileId))
            {
                return new JsonResult(new { Code = 300, IsExist = false, success = false, FileUrl = "", Msg = "参数不正确" });
            }

            if (!_fileList.Value.UploadChunkFileList.Value.ContainsKey(model.FileId))
            {
                return new JsonResult(new { Code = 200, IsExist = false, FileUrl = "" });
            }

            if (!_fileList.Value.UploadChunkFileList.Value[model.FileId].Contains(model.Md5))
            {
                return new JsonResult(new { Code = 200, IsExist = false, FileUrl = "" });
            }
            return new JsonResult(new { Code = 200, IsExist = true, success = true, miaochuan = true });
        }
        #endregion

        #region 解压、校验文件

        private void DoUnZip(string zipFile, string user)
        {
            Task.Factory.StartNew(async () =>
            {
                if (!System.IO.File.Exists(zipFile))
                {
                    //发送一条文件不存在的消息
                    await SentMessage(user, "访问上传的压缩包失败");
                    return;
                }
                var fastZip = new FastZip
                {
                    Password = "123456",
                    CreateEmptyDirectories = true
                };
                try
                {
                    var zipExtDir = Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "ZipEx", "601018");
                    //删除现有文件夹
                    if (Directory.Exists(zipExtDir))
                        Directory.Delete(zipExtDir, true);
                    //发送开始解压缩信息
                    await SentMessage(user, "开始解压缩文件。。。");
#if DEBUG
                    Debug.WriteLine("开始解压缩文件。。。");
#endif
                    fastZip.ExtractZip(zipFile, zipExtDir, "");
#if DEBUG
                    Debug.WriteLine("解压缩文件成功。。。");
#endif
                    await SentMessage(user, "解压缩文件成功，开始校验。。。");
                    //发送解压成功并开始校验文件信息
                    var zipFiles = Directory.GetFiles(zipExtDir, "*.jpg", SearchOption.AllDirectories);
                    for (var i = 0; i < zipFiles.Length; i++)
                    {
                        var file = zipFiles[i];
                        var i1 = i + 1;
                        await Task.Delay(100);//模拟文件处理需要100毫秒
                        //发送进度 i/length
                        await SentMessage(user, $"校验进度==>{i1}/{zipFiles.Length}", "400");
#if DEBUG
                        Debug.WriteLine($"当前进度:{i1},总数：{zipFiles.Length}");
#endif
                    }
                    await SentMessage(user, "校验完成", "200");
                }
                catch (Exception exception)
                {
                    //发送解压缩失败信息
                    await SentMessage(user, $"解压缩文件失败:{exception}", "500");
#if DEBUG
                    Debug.WriteLine($"解压缩文件失败:{exception}");
#endif
                }
            }, TaskCreationOptions.LongRunning);
        }

        #endregion

        #region 消息推送前台

        private async Task SentMessage(string user, string content, string code = "300")
        {

            await _hubContext.Clients.Client(user).UploadInfoMessage(new ClientMessageModel
            {
                UserId = user,
                GroupName = "upload",
                Context = content,
                Code = code
            });
        }

        #endregion
    }
}

未能完善的地方：

1、上传几百兆或更大的文件，webuploader计算md5时间太长；

2、后台处理错误的时候，前台接收消息后没能出现关闭按钮；

3、分块传输时文件断点续传没有具体实现（理论上是没问题的）

参考文章：

https://www.cnblogs.com/wdw984/p/11725118.html

http://fex.baidu.com/webuploader/

如此文章对你有帮助，请点个推荐吧。谢谢！