ASP.NET MVC+LayUI視訊上傳
阿新 • • 發佈：2020-08-01
前言：
前段時間在使用APS.NET MVC+LayUI做視訊上傳功能的時，發現當上傳一些記憶體比較大的視訊就會提示上傳失敗，後來通過查閱相關資料發現.NET MVC框架為考慮安全問題，在執行時對請求的檔案的長度（大小）做了限制預設為4MB（4096KB），因此我們需要在Web.Config中設定最大請求檔案長度大小，本篇部落格主要講解如何設定Web.Config中的最大請求檔案大小配置和提供一個完整的ASP.NET MVC+LayUI上傳視訊的教程，並且會提供一個完整的示例（是上傳到GitHub）有興趣的可以耐心的往下看。
GitHub完整例項地址：
https://github.com/YSGStudyHards/VideoUpload
上傳記憶體較大視訊提示異常（HTTP Error 404.13 - Not Found）：
異常原因分析：
由上圖我們可以清楚的知道因為我們所上傳的視訊內容藏毒超過了配置的值，所以上傳失敗了，並且還告訴我們需要到web.config檔案中配置允許最大上傳的檔案長度。
到web.config檔案中的httpRuntime節點配置最大上傳檔案大小：
首先我們開啟web.config=>找到system.web=>在httpRuntime中新增maxRequestLength屬性值
如下所示（maxRequestLength根據需求設定）：
<system.web>
<compilation debug="true" targetFramework="4.7.2"/>
<!--maxRequestLength：指示 ASP.NET 支援的最大檔案上傳大小。該限制可用於防止使用者將大量未知的檔案上傳到伺服器導致不安全問題的發生。指定的大小以 KB 為單位。預設值為 4096 KB (4 MB)。-->
<!--executionTimeout：表示允許執行請求的最大時間限制，單位為秒。-->
<!--這裡設定最大上傳長度未200MB，執行超時時間為600s-->
<httpRuntime targetFramework="4.7.2" maxRequestLength="204800" executionTimeout="600"/>
</system.web>
httpRuntime程式碼解釋：
executionTimeout：表示允許執行請求的最大時間限制，單位為秒。 maxRequestLength：指示 ASP.NET 支援的最大檔案上載大小。該限制可用於防止因使用者將大量檔案傳遞到該伺服器而導致的拒絕服務攻擊。指定的大小以 KB 為單位。預設值為 4096 KB (4 MB)。 useFullyQualifiedRedirectUrl：表示指示客戶端重定向是否是完全限定的（採用 "http://server/path" 格式，這是某些移動控制元件所必需的），或者指示是否代之以將相對重定向傳送到客戶端。如果為 True，則所有不是完全限定的重定向都將自動轉換為完全限定的格式。false 是預設選項。 minFreeThreads：表示指定允許執行新請求的自由執行緒的最小數目。ASP.NET 為要求附加執行緒來完成其處理的請求而使指定數目的執行緒保持自由狀態。預設值為 8。 minLocalRequestFreeThreads：表示ASP.NET 保持的允許執行新本地請求的自由執行緒的最小數目。該執行緒數目是為從本地主機傳入的請求而保留的，以防某些請求在其處理期間發出對本地主機的子請求。這避免了可能的因遞迴重新進入 Web 伺服器而導致的死鎖。 appRequestQueueLimit：表示ASP.NET 將為應用程式排隊的請求的最大數目。當沒有足夠的自由執行緒來處理請求時，將對請求進行排隊。當佇列超出了該設定中指定的限制時，將通過“503 - 伺服器太忙”錯誤資訊拒絕傳入的請求。 enableVersionHeader：表示指定 ASP.NET 是否應輸出版本標頭。Microsoft Visual Studio 2005 使用該屬性來確定當前使用的 ASP.NET 版本。對於生產環境，該屬性不是必需的，可以禁用。
設定相關配置後視訊上傳成功，上傳效果如下所示：
前端使用LayUI的視訊元件提交視訊以二進位制的檔案格式提交到後端服務介面：
1、首先引入相關的layUI相關的js和css檔案包：
2、在頁面中匯入相關引用：
3、使用layer.js視訊元件提交二進位制檔案到後端服務:
<link href="~/Content/layer-v3.1.1/layer/theme/default/layer.css" rel="stylesheet" />
<link href="~/Content/layui-v2.4.5/css/layui.css" rel="stylesheet" />
<div class="jumbotron" style="margin-top: 200px;">
<h3><a href="https://www.cnblogs.com/Can-daydayup/">追逐時光者的ASP.NET MVC+LayUI視訊上傳教程</a></h3>
<div class="row" style="margin-top: 20px;">
<div class="form-group znStyle">
<label class="col-sm-2 control-label"><em class="zent-form__required">*</em>視訊上傳：</label>
<div class="col-sm-6">
<div id="upload_all_file">
<div class="layui-upload">
<button type="button" class="layui-btn" id="VideoBtn"><i class="layui-icon"></i>上傳視訊</button>
<input type="hidden" name="Video" id="Video" />
<div class="layui-upload-list" id="videoPlay">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="~/Content/layer-v3.1.1/layer/layer.js"></script>
<script src="~/Content/layui-v2.4.5/layui.js"></script>
<!--layer.js視訊上傳-->
<script type="text/javascript">
var upload;
//上傳圖片
layui.use('upload', function () {
upload = layui.upload;
upload.render({
before: function () {
layer.msg('視訊努力上傳中,請耐心等待...', { icon: 16, shade: 0.8, time: false });
},
elem: '#VideoBtn'
, url: '@Url.Action("FileLoad","FileUpload")'
, accept: 'video' //視訊
, exts: 'mp4'//只允許上傳的字尾(mp4檔案)
, done: function (res) {
console.log(res);
layer.closeAll();
layer.msg(res.msg);
if (res.code == 1) {
$("#Video").val(res.path);
$("#videoPlay").html('<video controls="controls" id="currentVideo" style="width:400px;"><source src="' + res.path + '" type="video/mp4" /></video>');
$("#videoPlay").show();
// 自動播放
$("#currentVideo")[0].play();
}
}
});
$(".layui-upload-list").on("click", "i", function () {
$(this).parent().remove();
});
});
</script>
統一檔案，圖片，視訊，音訊上傳服務(FileUploadController):
/**
* Authority：追追時光者
* CreateTime：2020.08.01
* Description：檔案，圖片，視訊，音訊統一上傳介面
*/
using System;
using System.IO;
using System.Text;
using System.Web;
using System.Web.Mvc;
namespace VideoUpload.Controllers
{
/// <summary>
/// 檔案，圖片，視訊，音訊統一上傳服務
/// </summary>
public class FileUploadController : Controller
{
/// <summary>
/// 對驗證和處理 HTML 窗體中的輸入資料所需的資訊進行封裝，如FromData拼接而成的檔案[圖片,視訊，文件等檔案上傳]
/// </summary>
/// <param name="context">FemContext對驗證和處理html窗體中輸入的資料進行封裝</param>
/// <returns></returns>
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult FileLoad(FormContext context)//FemContext對驗證和處理html窗體中輸入的資料進行封裝
{
HttpPostedFileBase httpPostedFileBase = Request.Files[0];//獲取檔案流
if (httpPostedFileBase != null)
{
try
{
ControllerContext.HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
ControllerContext.HttpContext.Response.Charset = "UTF-8";
string fileName = Path.GetFileName(httpPostedFileBase.FileName);//原始檔名稱
string fileExtension = Path.GetExtension(fileName);//副檔名
byte[] fileData = ReadFileBytes(httpPostedFileBase);//檔案流轉化為二進位制位元組
string result = SaveFile(fileExtension, fileData);//檔案儲存
return string.IsNullOrEmpty(result) ? Json(new { code = 0, path = "", msg = "網路異常，檔案上傳失敗~" }) : Json(new { code = 1, path = result, msg = "檔案上傳成功" });
}
catch (Exception ex)
{
return Json(new { code = 0, msg = ex.Message, path = "" });
}
}
else
{
return Json(new { code = 0, path = "", msg = "網路異常，檔案上傳失敗~" });
}
}
/// <summary>
/// 將檔案流轉化為二進位制位元組
/// </summary>
/// <param name="fileData">圖片檔案流</param>
/// <returns></returns>
private byte[] ReadFileBytes(HttpPostedFileBase fileData)
{
byte[] data;
using (var inputStream = fileData.InputStream)
{
if (!(inputStream is MemoryStream memoryStream))
{
memoryStream = new MemoryStream();
inputStream.CopyTo(memoryStream);
}
data = memoryStream.ToArray();
}
return data;
}
/// <summary>
/// 儲存檔案
/// </summary>
/// <param name="fileExtension">副檔名</param>
/// <param name="fileData">圖片二進位制檔案資訊</param>
/// <returns></returns>
private string SaveFile(string fileExtension, byte[] fileData)
{
string result;
string saveName = Guid.NewGuid().ToString() + fileExtension; //儲存檔名稱
string basePath = "UploadFile";
string saveDir = DateTime.Now.ToString("yyyy-MM-dd");
// 檔案上傳後的儲存路徑
string serverDir = Path.Combine(Server.MapPath("~/"), basePath, saveDir);
string fileNme = Path.Combine(serverDir, saveName);//儲存檔案完整路徑
try
{
var savePath = Path.Combine(saveDir, saveName);
//專案中是否存在資料夾，不存在建立
if (!Directory.Exists(serverDir))
{
Directory.CreateDirectory(serverDir);
}
System.IO.File.WriteAllBytes(fileNme, fileData);//WriteAllBytes建立一個新的檔案，按照對應的檔案流寫入，假如已存在則覆蓋
//返回前端專案檔案地址
result = "/" + basePath + "/" + saveDir + "/" + saveName;
}
catch (Exception ex)
{
result = "發生錯誤" + ex.Message;
}
return result;
}
}
}
參考文章：
https://docs.microsoft.com/en-us/iis/configuration/system.webServer/security/requestFiltering/requestLimits/
http://www.webkaka.com/tutorial/asp.net/2018/051026/