ASP.NET MVC+LayUI视频上传完整教程

前言

前段时间在使用APS.NET MVC+LayUI做视频上传功能的时,发现当上传一些内存比较大的视频就会提示上传失败,后来通过查阅相关资料发现.NET MVC框架为考虑安全问题,在运行时对请求的文件的长度(大小)做了限制默认为4MB(4096KB),因此我们需要在Web.Config中设置最大请求文件长度大小,本文主要讲解如何设置Web.Config中的最大请求文件大小配置和提供一个完整的ASP.NET MVC+LayUI上传视频的教程。

上传内存较大视频提示异常

HTTP Error 404.13 - Not Found。

图片

异常原因分析:

由上图我们可以清楚的知道因为我们所上传的视频内容藏毒超过了配置的值,所以上传失败了,并且还告诉我们需要到web.config文件中配置允许最大上传的文件长度。

设置Web.config文件中配置

到Web.config文件中的httpRuntime节点配置最大上传文件大小和requestLimits请求最大长度。

首先我们打开web.config=>找到system.web=>在httpRuntime中添加maxRequestLength属性值。

如下所示(maxRequestLength和maxAllowedContentLength根据需求设置):

<system.web><!--maxRequestLength:指示 ASP.NET 支持的最大文件上传大小。该限制可用于防止用户将大量未知的文件上传到应用服务器而导致不安全问题的发生。指定的大小以 KB 为单位。默认值为 4096 KB (4 MB)。--><!--executionTimeout:表示允许执行请求的最大时间限制,单位为秒。--><!--这里设置最大上传长度为200MB,执行超时时间为600s--><httpRuntime targetFramework="4.7.2"  maxRequestLength="204800" executionTimeout="600"/><system.webServer><security><requestFiltering><requestLimits maxAllowedContentLength="204800"/></requestFiltering></security></system.webServer></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">&#xe67c;</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):

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

源码地址

https://github.com/YSGStudyHards/VideoUpload

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/415753.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

维信小程序禁止截屏/录屏

一、维信小程序禁止截屏/录屏 //录屏截屏,禁用wx.setVisualEffectOnCapture({visualEffect:hidden});wx.setVisualEffectOnCapture(Object object) 测试安卓手机&#xff1a; 用户截屏&#xff0c;被禁用 用户录屏&#xff0c;录制的是空白内容/黑色内容的视频。 二、微信小…

一种常用嵌入式开发代码库

链接&#xff1a;https://gitee.com/zhangxinyuanqi/varch 使用开源协议&#xff1a;GPL-2.0 varch简介 varch&#xff08;we-architecture&#xff0c;意为我们的框架库&#xff09;是嵌入式C语言常用代码模块库&#xff0c;包含了嵌入式中常用的算法库, 数据结构&#xff…

【云原生系列之SkyWalking的部署】

1、分布式链路追踪 1.1概念 在较大的web集群和微服务环境中&#xff0c;客户端的一次请求需要经过不同的模块&#xff0c;多个不同中间件&#xff0c;多个不同机器一起相互协作才能处理完成客户端的请求&#xff0c;而在这一系列的请求过程之中,处理流程可能是串行执行,也可能…

SprinBoot+Vue实验室考勤管理微信小程序的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 Controller3.2 Service3.3 Dao3.4 application.yml3.5 SpringbootApplication3.5 Vue3.6 uniapp代码 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平…

【笔试练习】深信服校园招聘c/c 软件开发H卷

题目链接 一、填空题 如图所示&#xff0c;平面上有两条平行的线段&#xff0c;上面的线段有A0~A3 4个点&#xff0c;下面的线段有B0到B5 6个点&#xff0c;现在需要把所有的点都连接起来&#xff0c;有如下约束&#xff1a; 每个端点&#xff0c;都至少有一条到另一平行线上端…

HTML+CSS+Query实现二级菜单

在网页设计中&#xff0c;导航菜单是非常重要的部分之一&#xff0c;尤其是具有二级下拉菜单的导航栏&#xff0c;可以提升用户体验。本文将通过HTML、CSS和jQuery实现一个具有二级菜单标题的导航栏&#xff0c;并详细讲解每一步的实现过程。 <!DOCTYPE html> <html …

TS 学习(一)

如果我们在 ts 中写 不用运行就能在文件中报错 ts 是一种静态类型的检查 能将运行时出现的错误前置 一般不用 命令行编译 ts 转换成 js 将中文转码 tsc index&#xff08;.ts&#xff09; 输入命令生成 配置文件 能在中间进行 配置转换成 js 的哪个规范 es5 还是 6 和其它转…

JavaScript编程语言的学习

一、JavaScript介绍 JavaScript 是一种轻量级的脚本语言。所谓“脚本语言”&#xff0c;指的是它不具备开发操作系统的能力&#xff0c;而是只用来编写控制其他大型应用程序的“脚本”。 JavaScript 是一种嵌入式&#xff08;embedded&#xff09;语言。它本身提供的核心语法不…

数分基础(06)商业分析四种类型简介

文章目录 1. 商业分析2. 四种类型2.1 描述性分析和诊断性分析2.1.1 加载Global_Superstore数据集2.1.2 描述性分析2.1.3 诊断性分析2.1.4 再进一步各地区的订单数量和平均订单金额按客户群体分析销售额和利润折扣率和利润产品类别和子类别的销售和利润 本小节小结 2.2 销售预测…

在众多编程工具中,哪一个最能提高你的生产力?

随着软件开发行业的快速发展&#xff0c;开发者们需要使用多种工具来管理代码、调试应用程序、测试功能、以及处理数据库操作。每一个环节都可能会影响到整个项目的进展和最终质量&#xff0c;因此选择合适的工具对于提高工作效率至关重要。在这篇文章中&#xff0c;我将从开发…

VMware16安装Win11虚拟机全步骤

目录 准备工作下载镜像安装镜像开启虚拟机安装虚拟机安装Win11成功 准备工作 1、虚拟机&#xff1a;VMware16.2.1&#xff08;建议使用VMware16版本&#xff0c;15可能不兼容&#xff09; 2、Windows11镜像 下载镜像 1、浏览器打开网址&#xff1a;I tell you 可以看到有三…

坐牢第三十四天(c++)

一.作业 1.栈的手写 #include <iostream> using namespace std; // 封装一个栈 class stcak { private:int *data; //int max_size; // 最大容量int top; // 下标 public:// 无参构造函数stcak();// 有参构造函数stcak(int size);// 拷贝构造函数stcak(const s…

MySQL数据库增删查改(基础)CRUD

CRUD 即增加 (Create) 、查询 (Retrieve) 、更新 (Update) 、删除 (Delete) 四个单词的首字母缩写。 1. 新增&#xff08;Create&#xff09; 1.1单行数据&#xff08;全列插入&#xff09; 比如说&#xff1a;创建一张学生表&#xff0c;有姓名&#xff0c;学号。插入两个学…

什么是科学碳目标(SBTI认证)

科学碳目标&#xff08;SBTI认证&#xff09;&#xff0c;这一绿色发展的璀璨明珠&#xff0c;是企业迈向可持续未来的重要里程碑。它不仅是全球环境信息研究中心(CDP)、联合国全球契约组织(UNGC)、世界资源研究所(WRI)与世界自然基金会(WWF)共同铸就的智慧结晶&#xff0c;更是…

一款实用的浏览器插件,关闭登录提示框一键复制代码

codebox插件是一款面向开发者和技术爱好者的浏览器插件&#xff0c;旨在优化用户的浏览和学习体验。该插件支持多个技术网站&#xff0c;包括CSDN、知乎、简书、脚本之家、博客园、51CTO博客和php中文网等。 主要功能包括&#xff1a; 免登录一键复制代码&#xff1a;用户无需…

Two to One——C语言提高题【7 kyu】

一、原题 链接&#xff1a;Training on Two to One | Codewars Take 2 strings s1 and s2 including only letters from a to z. Return a new sorted string (alphabetical ascending), the longest possible, containing distinct letters - each taken only once - coming…

书生大模型实战营基础(3)——LangGPT结构化提示词编写实践

目录 0、基础知识 1、准备 1.1环境配置 1.2创建项目路径 2、模型部署 2.1获取模型 2.2部署模型为OpenAI server 3.提示工程(Prompt Engineering) 3.1 什么是Prompt 3.2 什么是提示工程 3.3 提示设计框架 4、任务 4.1利用LangGPT优化提示词 0、基础知识 Prompt&…

C++程序调用SetWindowsHookEx全局拦截键盘按键消息和窗口消息的Hook实例分享

目录 1、Hook与Hook过程函数 2、SetWindowsHookEx函数说明 3、Hook实例1 - 使用SetWindowsHookEx在程序中拦截键盘消息 4、Hook实例2 - 使用SetWindowsHookEx在程序中拦截某个窗口的消息 5、最后 C软件异常排查从入门到精通系列教程&#xff08;专栏文章列表&#xff0c;欢…

wsl下将Ubuntu从c盘移动到其他盘

一、概述 因为自己的C盘内存不足&#xff0c;加上之后需要在Ubuntu下面下载许多的内容和东西&#xff0c;需要将其移动到d盘上面&#xff0c;这样可以拥有更大的空间。这里记载了一下自己的操作过程。 二、具体步骤 &#xff08;一&#xff09;过程 1.查看当前系统中wsl分发版…

Hi3061M开发板初测——点亮小灯

目录 前言环境配置点亮led源码IDA集成了串口监视器最后下载到开发板中运行 前言 海思MCU体验官活动&#xff0c;Hi3061M开发板到手后&#xff0c;配置环境初步测试点亮小灯。 环境配置 环境配置按照gitee提供的redeme一步一步来配置起来很顺利。具体可自行查阅&#xff1a;环境…