In diesem Kapitel wird ein Beispiel für das Hochladen von Dateien mit dem MVC-Framework von .NetCore vorgestellt. Zu den Hauptinhalten gehören: Formularübermittlung zum Hochladen, Ajax-Upload, Ajax-Übermittlung + Upload-Fortschrittseffekt, Aufgabenparallele Verarbeitung + Ajax-Übermittlung + Upload-Fortschritt ist für alle sehr hilfreich. Interessierte Freunde können dem Editor folgen, um gemeinsam zu lernen
Dieses Kapitel zeigt Ihnen ein Beispiel für das Hochladen von Dateien mit dem MVC-Framework von .NetCore. Die Hauptinhalte sind: Formularübermittlung und -hochladen, Ajax Hochladen, Ajax-Einreichung + Upload-Fortschrittseffekt, Task-Parallelverarbeitung + Ajax-Einreichung + Upload-Fortschritt. Wenn Sie können, können Sie ihm auch ein „Gefällt mir“ geben Der Computer hat gestern keinen Strom mehr, ich bin fast fertig mit dem Schreiben. Der Inhalt wurde nicht gespeichert, also bin ich heute früh zur Firma gekommen und habe von vorne begonnen. Der Stromausfall bereitete der Community zwar Kopfschmerzen Teilen Sie die Umgebung, es hat sich gelohnt. Kommen wir zum heutigen Hauptteil Schauen wir uns zunächst unseren HTML-Code an. Hier finden Sie eine kurze Erklärung, was zum Hochladen von Dateien erforderlich ist , müssen Sie das Element file type='file' auf ihr Attribut multiple='multiple' setzen, also mit folgendem Inhalt:
Aufgrund der Formularübermittlung In diesem Testfall werden nur der Standardtyp = Senden des Schaltflächenelements zum Senden des Formulars und die entsprechende Hintergrundaktion verwendet. Der Code lautet wie folgt:
<form class="form-horizontal" action="/Home/FileUp" method="post" enctype="multipart/form-data"> <input type="file" name="MyPhoto" class="form-control" multiple /> <br /> <button class="btn btn-default">form上传</button> <br /> <span style="color:red">@ViewData["MsgBox"]</span> </form>
der Datei
im HTML-Format abzugleichen:
/// <summary>
/// form提交上传
/// </summary>
/// <param name="user"></param>
/// <returns></returns>
[HttpPost]
public async Task<IActionResult> FileUp(MoUser user)
{
if (user.MyPhoto == null || user.MyPhoto.Count <= 0) { MsgBox("请上传图片。"); return View(); }
//var file = Request.Form.Files;
foreach (var file in user.MyPhoto)
{
var fileName = file.FileName;
var contentType = file.ContentType;
var len = file.Length;
var fileType = new string[] { "image/jpeg", "image/png" };
if (!fileType.Any(b => b.Contains(contentType))) { MsgBox($"只能上传{string.Join(",", fileType)}格式的图片。"); return View(); }
if (len > 1024 * 1024 * 4) { MsgBox("上传图片大小只能在4M以下。"); return View(); }
var path = Path.Combine(@"D:\F\学习\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
using (var stream = System.IO.File.Create(path))
{
await file.CopyToAsync(stream);
}
}
MsgBox($"上传成功");
return View();
}public List<IFormFile> MyPhoto { get; set; } Auf diese Weise wird die hochgeladene Datei angezeigt Informationen können im MyPhoto-Attribut in der benutzerdefinierten MoUser-Klasse über das Entitätsmodell gespeichert werden. type='file'的namename="MyPhoto"
Ajax lädt eine Reihe von Bildern hoch
public class MoUser
{
public int UserId { get; set; } = 1;
public string UserName { get; set; } = "神牛步行3";
public List<IFormFile> MyPhoto { get; set; }
}Hier Im obigen Beispiel müssen einige Dinge im HTML geändert werden. Anstatt die Formularübermittlung zu verwenden, wird eine normale Schaltfläche zum Auslösen der Ajax-Übermittlung angegeben. Der vollständige HTML-Code lautet wie folgt:
Mit dem Layout werfen wir einen Blick auf den spezifischen js-Implementierungscode. Hier verwende ich die Ajax-Übermittlungsmethode von jquery und verwende auch die neuen FormData in HTML5, um die Formulardaten zu speichern 🎜>
Was die Hintergrundaktionsmethode betrifft, unterscheidet sie sich nicht wesentlich von Beispiel 1. Der entscheidende Punkt ist, dass ich hier direkt die Methode „Request.Form.Files“ verwende, um das Hochzuladen zu erhalten Alle Dateien verwenden keine Entitätsmodelle mehr, sodass die Testfälle vielfältiger sind:
<form class="form-horizontal" id="form01" method="post" enctype="multipart/form-data"> <input type="file" name="MyPhoto01" class="form-control" multiple /> <br /> <button type="button" id="btnAjax" class="btn btn-default">ajax上传</button> <br /> <span style="color:red" id="span01"></span> </form>
Wenn Sie die Geduld haben, dies zu lesen, dann ist der folgende Inhalt persönlich ist der Meinung, dass es Ihrer Entwicklung eine gute Hilfe sein wird und Ihren Erwartungen gerecht wird
$("#btnAjax").on("click", function () {
var msg = $("#span01");
var form = document.getElementById("form01");
//console.log(form);
var data = new FormData(form);
$.ajax({
type: "POST",
url: "/home/AjaxFileUp",
data: data,
contentType: false,
processData: false,
success: function (data) {
if (data) {
msg.html(data.msg);
}
},
error: function () {
msg.html("上传文件异常,请稍后重试！");
}
});
});Ajax-Einreichung + Upload-Fortschritt + eine Reihe von Bild-Uploads
/// <summary>
/// ajax无上传进度效果上传
/// </summary>
/// <returns></returns>
[HttpPost]
public async Task<JsonResult> AjaxFileUp()
{
var data = new MoData { Msg = "上传失败" };
try
{
var files = Request.Form.Files.Where(b => b.Name == "MyPhoto01");
//非空限制
if (files == null || files.Count() <= 0) { data.Msg = "请选择上传的文件。"; return Json(data); }
//格式限制
var allowType = new string[] { "image/jpeg", "image/png" };
if (files.Any(b => !allowType.Contains(b.ContentType)))
{
data.Msg = $"只能上传{string.Join(",", allowType)}格式的文件。";
return Json(data);
}
//大小限制
if (files.Sum(b => b.Length) >= 1024 * 1024 * 4)
{
data.Msg = "上传文件的总大小只能在4M以下。"; return Json(data);
}
//写入服务器磁盘
foreach (var file in files)
{
var fileName = file.FileName;
var path = Path.Combine(@"D:\F\学习\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
using (var stream = System.IO.File.Create(path))
{
await file.CopyToAsync(stream);
}
}
data.Msg = "上传成功";
data.Status = 2;
}
catch (Exception ex)
{
data.Msg = ex.Message;
}
return Json(data);
}Um einen Fortschrittseffekt hinzuzufügen, benötigen Sie den Timer von js, um regelmäßig die Upload-Fortschrittsdateninformationen der hochgeladenen Datei abzurufen. Daher wird die setInterval-Methode von js verwendet, um regelmäßig eine Fortschrittsdatenschnittstelle anzufordern Sie müssen diesen Timer nach der Verwendung löschen, da sonst weiterhin Ihre Schnittstelle angefordert wird:
Da oben zusätzlich zur Upload-Aktion die separate Fortschrittsdatenschnittstelle erwähnt wird Wir benötigen auch die Fortschrittsaktion und die durch die Fortschrittsaktion erhaltenen Upload-Dateidaten. Die Informationen müssen mit der hochgeladenen Aktion übereinstimmen, daher müssen Sie Cache und andere Methoden zum Speichern von Daten verwenden. Hier verwende ich die MemoryCache-Methode Sie müssen es nur zur Startdatei hinzufügen (z. B. Startup.cs):
<form class="form-horizontal" id="form02" method="post" enctype="multipart/form-data"> <input type="file" name="MyPhoto02" class="form-control" multiple /> <br /> <button type="button" id="btnAjax02" class="btn btn-default">ajax上传进度效果上传</button> <br /> <span style="color:red" id="span02"></span> </form>
und dann über die entsprechende Schnittstelle injizieren Konstruktor:
$("#btnAjax02").on("click", function () {
var interBar;
var msg = $("#span02");
msg.html("上传中，请稍后...");
var form = document.getElementById("form02");
//console.log(form);
var data = new FormData(form);
$.ajax({
type: "POST",
url: "/home/AjaxFileUp02",
data: data,
contentType: false,
processData: false,
success: function (data) {
if (data) {
msg.html(data.msg);
//清除进度查询
if (interBar) { clearInterval(interBar); }
}
},
error: function () {
msg.html("上传文件异常,请稍后重试！");
if (interBar) { clearInterval(interBar); }
}
});
//获取进度
interBar = setInterval(function () {
$.post("/home/ProgresBar02", function (data) {
if (data) {
var isClearVal = true;
var strArr = [];
$.each(data, function (i, item) {
strArr.push('文件：' + item.fileName + ",当前上传：" + item.percentBar + '<br/>');
if (item.status != 2) { isClearVal = false; }
});
msg.html(strArr.join(''));
if (isClearVal) {
if (interBar) { clearInterval(interBar); }
}
}
});
}, 200);
});Jetzt können wir den Cache verwenden, um unsere Upload-Fortschrittsinformationen zu speichern:
public void ConfigureServices(IServiceCollection services)
{
// Add framework services.
services.AddMvc();
//添加cache支持
services.AddDistributedMemoryCache();
}Der Code wird plötzlich sehr groß. Tatsächlich wird der Logik nach nur ein Cache hinzugefügt, um den Fortschritt zu speichern, und die Logik besteht darin, den hochgeladenen Dateistream einzeln zu lesen. Sie können sich den Code genau ansehen, es gibt Hinweise; und dann gibt es noch unsere Fortschrittsinformations-Aktionsschnittstelle:
readonly IMemoryCache _cache;
public HomeController(IOptions<MoOptions> options, ILogger<HomeController> logger, IMemoryCache cache)
{ this._options = options.Value;
_logger = logger;
_cache = cache;
}Die Fortschrittsschnittstelle muss nur die Fortschrittsinformationen abrufen im Cache. Hinweis: Für bestimmte Verwendungsszenarien fügen Sie bitte selbst andere Logikcodes hinzu >
Aufgabenparallele Verarbeitung + Ajax-Übermittlung + Upload-Fortschritt + eine Reihe von Bild-Uploads
private string cacheKey = "UserId_UpFile";
private string cacheKey03 = "UserId_UpFile03";
/// <summary>
/// ajax上传进度效果上传
/// </summary>
/// <returns></returns>
[HttpPost]
public async Task<JsonResult> AjaxFileUp02()
{
var data = new MoData { Msg = "上传失败" };
try
{
var files = Request.Form.Files.Where(b => b.Name == "MyPhoto02");
//非空限制
if (files == null || files.Count() <= 0) { data.Msg = "请选择上传的文件。"; return Json(data); }
//格式限制
var allowType = new string[] { "image/jpeg", "image/png" };
if (files.Any(b => !allowType.Contains(b.ContentType)))
{
data.Msg = $"只能上传{string.Join(",", allowType)}格式的文件。";
return Json(data);
}
//大小限制
if (files.Sum(b => b.Length) >= 1024 * 1024 * 4)
{
data.Msg = "上传文件的总大小只能在4M以下。"; return Json(data);
}
//初始化上传多个文件的Bar，存储到缓存中，方便获取上传进度
var listBar = new List<MoBar>();
files.ToList().ForEach(b =>
{
listBar.Add(new MoBar
{
FileName = b.FileName,
Status = 1,
CurrBar = 0,
TotalBar = b.Length
});
});
_cache.Set<List<MoBar>>(cacheKey, listBar);
//写入服务器磁盘
foreach (var file in files)
{
//总大小
var totalSize = file.Length;
//初始化每次读取大小
var readSize = 1024L;
var bt = new byte[totalSize > readSize ? readSize : totalSize];
//当前已经读取的大小
var currentSize = 0L;
var fileName = file.FileName;
var path = Path.Combine(@"D:\F\学习\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
using (var stream = System.IO.File.Create(path))
{
//await file.CopyToAsync(stream);
//进度条处理流程
using (var inputStream = file.OpenReadStream())
{
//读取上传文件流
while (await inputStream.ReadAsync(bt, 0, bt.Length) > 0)
{
//当前读取的长度
currentSize += bt.Length;
//写入上传流到服务器文件中
await stream.WriteAsync(bt, 0, bt.Length);
//获取每次读取的大小
readSize = currentSize + readSize <= totalSize ?
readSize :
totalSize - currentSize;
//重新设置
bt = new byte[readSize];
//设置当前上传的文件进度，并重新缓存到进度缓存中
var bars = _cache.Get<List<MoBar>>(cacheKey);
var currBar = bars.Where(b => b.FileName == fileName).SingleOrDefault();
currBar.CurrBar = currentSize;
currBar.Status = currentSize >= totalSize ? 2 : 1;
_cache.Set<List<MoBar>>(cacheKey, bars);
System.Threading.Thread.Sleep(1000 * 1);
}
}
}
}
data.Msg = "上传完成";
data.Status = 2;
}
catch (Exception ex)
{
data.Msg = ex.Message;
}
return Json(data);
}这一小节，将会使用Task来处理上传的文件，通过上一小节截图能够看出，如果你上传多个文件，那么都是按照次序一个一个读取文件流来生成上传文件到服务器，这里改良一下利用Task的特点，就能实现同时读取不同文件流了，先来看下html代码和js代码:
<form class="form-horizontal" id="form03" method="post" enctype="multipart/form-data">
<input type="file" name="MyPhoto03" class="form-control" multiple />
<br />
<button type="button" id="btnAjax03" class="btn btn-default">task任务处理ajax上传进度效果上传</button>
<br />
<span style="color:red" id="span03"></span>
</form>由于和示例3的js代码无差别这里我直接贴出代码：
$("#btnAjax03").on("click", function () {
var interBar;
var msg = $("#span03");
msg.html("上传中，请稍后...");
var form = document.getElementById("form03");
//console.log(form);
var data = new FormData(form);
$.ajax({
type: "POST",
url: "/home/AjaxFileUp03",
data: data,
contentType: false,
processData: false,
success: function (data) {
if (data) {
msg.html(data.msg);
//清除进度查询
if (interBar) { clearInterval(interBar); }
}
},
error: function () {
msg.html("上传文件异常,请稍后重试！");
if (interBar) { clearInterval(interBar); }
}
});
//获取进度
interBar = setInterval(function () {
$.post("/home/ProgresBar03", function (data) {
if (data) {
var isClearVal = true;
var strArr = [];
$.each(data, function (i, item) {
strArr.push('文件：' + item.fileName + ",当前上传：" + item.percentBar + '<br/>');
if (item.status != 2) { isClearVal = false; }
});
msg.html(strArr.join(''));
if (isClearVal) {
if (interBar) { clearInterval(interBar); }
}
}
});
}, 200);
});关键点在后台，通过task数组来存储每个上传文件的处理任务 Task[] tasks = new Task[len]; ，然后使用 Task.WaitAll(tasks); 等待所有上传任务的完成，这里特别注意了这里必须等待，不然会丢失上传文件流(多次测试结果)：
/// <summary>
/// ajax上传进度效果上传
/// </summary>
/// <returns></returns>
[HttpPost]
public JsonResult AjaxFileUp03()
{
var data = new MoData { Msg = "上传失败" };
try
{
var files = Request.Form.Files.Where(b => b.Name == "MyPhoto03");
//非空限制
if (files == null || files.Count() <= 0) { data.Msg = "请选择上传的文件。"; return Json(data); }
//格式限制
var allowType = new string[] { "image/jpeg", "image/png" };
if (files.Any(b => !allowType.Contains(b.ContentType)))
{
data.Msg = $"只能上传{string.Join(",", allowType)}格式的文件。";
return Json(data);
}
//大小限制
if (files.Sum(b => b.Length) >= 1024 * 1024 * 4)
{
data.Msg = "上传文件的总大小只能在4M以下。"; return Json(data);
}
//初始化上传多个文件的Bar，存储到缓存中，方便获取上传进度
var listBar = new List<MoBar>();
files.ToList().ForEach(b =>
{
listBar.Add(new MoBar
{
FileName = b.FileName,
Status = 1,
CurrBar = 0,
TotalBar = b.Length
});
});
_cache.Set<List<MoBar>>(cacheKey03, listBar);
var len = files.Count();
Task[] tasks = new Task[len];
//写入服务器磁盘
for (int i = 0; i < len; i++)
{
var file = files.Skip(i).Take(1).SingleOrDefault();
tasks[i] = Task.Factory.StartNew((p) =>
{
var item = p as IFormFile;
//总大小
var totalSize = item.Length;
//初始化每次读取大小
var readSize = 1024L;
var bt = new byte[totalSize > readSize ? readSize : totalSize];
//当前已经读取的大小
var currentSize = 0L;
var fileName = item.FileName;
var path = Path.Combine(@"D:\F\学习\vs2017\netcore\netcore01\WebApp01\wwwroot\myfile", fileName);
using (var stream = System.IO.File.Create(path))
{
//进度条处理流程
using (var inputStream = item.OpenReadStream())
{
//读取上传文件流
while (inputStream.Read(bt, 0, bt.Length) > 0)
{
//当前读取的长度
currentSize += bt.Length;
//写入上传流到服务器文件中
stream.Write(bt, 0, bt.Length);
//获取每次读取的大小
readSize = currentSize + readSize <= totalSize ?
readSize :
totalSize - currentSize;
//重新设置
bt = new byte[readSize];
//设置当前上传的文件进度，并重新缓存到进度缓存中
var bars = _cache.Get<List<MoBar>>(cacheKey03);
var currBar = bars.Where(b => b.FileName == fileName).SingleOrDefault();
currBar.CurrBar = currentSize;
currBar.Status = currentSize >= totalSize ? 2 : 1;
_cache.Set<List<MoBar>>(cacheKey03, bars);
System.Threading.Thread.Sleep(1000 * 1);
}
}
}
}, file);
}
//任务等待 ，这里必须等待，不然会丢失上传文件流
Task.WaitAll(tasks);
data.Msg = "上传完成";
data.Status = 2;
}
catch (Exception ex)
{
data.Msg = ex.Message;
}
return Json(data);
}至于获取上传进度的Action也仅仅只是读取缓存数据而已：
[HttpPost]
public JsonResult ProgresBar03()
{
var bars = new List<MoBar>();
try
{
bars = _cache.Get<List<MoBar>>(cacheKey03);
}
catch (Exception ex)
{
}
return Json(bars);
}这里再给出上传进度的实体类：
public class MoData
{
/// <summary>
/// 0：失败 1：上传中 2:成功
/// </summary>
public int Status { get; set; }
public string Msg { get; set; }
}
public class MoBar : MoData
{
/// <summary>
/// 文件名字
/// </summary>
public string FileName { get; set; }
/// <summary>
/// 当前上传大小
/// </summary>
public long CurrBar { get; set; }
/// <summary>
/// 总大小
/// </summary>
public long TotalBar { get; set; }
/// <summary>
/// 进度百分比
/// </summary>
public string PercentBar
{
get
{
return $"{(this.CurrBar * 100 / this.TotalBar)}%";
}
}
}到此task任务处理上传文件的方式就完成了，咋们来看图看效果吧：
能够通过示例3和4的效果图对比出，没使用Task和使用的效果区别，这样效果您值得拥有，耐心读完本文内容的朋友，没让你失望吧，如果可以不妨点个"赞"或扫个码支持下作者，谢谢；内容最后附上具体测试用例代码：.NetCore上传多文件的几种示例
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung des Beispiels zum Hochladen mehrerer Dateien mit .NetCore. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
