阅读参考此文章前,请先看一下
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
{
/// <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中我们所要使用的事件监测、文件上传功能。
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('<div id="' +
225 file.id +
226 '" class="item">' +
227 '<h4 class="info">' +
228 file.name +
229 '</h4>' +
230 '<input type="hidden" id="h_' +
231 file.id +
232 '" value="' +
233 file.guid +
234 '" />' +
235 '<p class="state">等待上传...</p>' +
236 '</div>');
237 });
238
239 // 文件上传过程中创建进度条实时显示。
240 uploader.on('uploadProgress',
241 function(file, percentage) {
242 var $li = $('#' + file.id),
243 $percent = $li.find('.progress .progress-bar');
244 // 避免重复创建
245 if (!$percent.length) {
246 $percent = $('<div class="progress progress-striped active">' +
247 '<div class="progress-bar" role="progressbar" style="width: 0%">' +
248 '</div>' +
249 '</div>').appendTo($li).find('.progress-bar');
250 }
251 $li.find('p.state').text('上传中');
252
253 $percent.css('width', percentage * 100 + '%');
254 });
255
256 uploader.on('uploadSuccess',
257 function(file) {
258 if (dataState == undefined) {
259 $('#' + file.id).find('p.state').text('上传失败');
260 $('#' + file.id).find('button').remove();
261 $('#' + file.id).find('p.state').before('<button id="retry" type="button" class="btn btn-primary fright retry pbtn">重新上传</button>');
262 file.setStatus('error');
263 return;
264 }
265 if (dataState.success == true) {
266 if (dataState.miaochuan == true) {
267 $('#' + file.id).find('p.state').text('上传成功[秒传]');
268 } else {
269 $('#' + file.id).find('p.state').text('上传成功');
270 }
271 $('#' + file.id).find('button').remove();
272 return;
273
274 } else {
275 $('#' + file.id).find('p.state').text('服务器未能成功接收,状态:' + dataState.success);
276 return;
277 }
278 });
279
280 uploader.on('uploadError',
281 function(file) {
282 $('#' + file.id).find('p.state').text('上传出错');
283 });
284 //分块传输后,可以在这个事件中获取到服务器返回的信息,同时这里可以实现文件续传(块文件的MD5存在时,后台可以跳过保存步骤)
285 uploader.on('uploadAccept',
286 function(file, response, reject) {
287 if (response.code !== 200) {
288 alert("上传出错:" + response.msg);
289 return false;
290 }
291 return true;
292 });
293 uploader.on('uploadComplete',
294 function(file) {
295 $('#' + file.id).find('.progress').fadeOut();
296 });
297
298 uploader.on('all',
299 function(type) {
300 if (type === 'startUpload') {
301 state = 'uploading';
302 } else if (type === 'stopUpload') {
303 state = 'paused';
304 } else if (type === 'uploadFinished') {
305 state = 'done';
306 }
307 if (state === 'done') {
308 $btn.text('继续上传');
309 } else if (state === 'uploading') {
310 $btn.text('暂停上传');
311 } else {
312 $btn.text('开始上传');
313 }
314 });
315 $btn.on('click',
316 function() {
317 if (state === 'uploading') {
318 uploader.stop();
319 } else if (state == 'done') {
320 window.location.reload();
321 } else {
322 uploader.upload();
323 }
324 });
325 });
326 </script>
327 }
328 <div class="container">
329 <div class="row">
330 <div id="uploader" class="wu-example">
331 <span style="color: red">请上传压缩包</span>
332 <div class="form-group" id="thelist">
333 </div>
334 <div class="form-group">
335 <form method="post">
336 <div id="picker" class="webuploader-container">
337 <div class="webuploader-pick">选择文件</div>
338 <div style="position: absolute; top: 0; left: 0; width: 88px; height: 34px; overflow: hidden; bottom: auto; right: auto;">
339 <input type="file" name="file" class="webuploader-element-invisible" />
340 <label style="-ms-opacity: 0; opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);"></label>
341 </div>
342 </div>
343 <button id="ctlBtn" class="btn btn-success" type="button">开始上传</button>
344 </form>
345 </div>
346 </div>
347 </div>
348 </div>
349
350 <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" style="display: none;" data-backdrop="static" aria-hidden="true">
351 <div class="modal-dialog modal-dialog-scrollable">
352 <div class="modal-content">
353 <div class="modal-header">
354 <h5 class="modal-title" id="exampleModalScrollableTitle">正在处理。。。</h5>
355 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
356
357 </button>
358 </div>
359 <div class="modal-body">
360 <p>服务器正在处理数据,请不要关闭和刷新此页面。</p>
361 </div>
362 </div>
363 </div>
364 </div>
index.cshtml的代码文件如下
本示例只能解压缩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
}
}