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

news2024/11/13 9:26:30

前言

前段时间在使用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.coloradmin.cn/o/2080903.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

缓存Mybatis一级缓存与二级缓存

缓存 为什么使用缓存 缓存(cache)的作用是为了减去数据库的压力,提高查询性能,缓存实现原理是从数据库中查询出来的对象在使用完后不销毁,而是存储在内存(缓存)中,当再次需要获取对象时,直接从内存(缓存)中提取,不再向数据库执行select语句,从而减少了对数据库的查询次数,因此…

力扣之字母异位词分组(python)

题目 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 1: 输入: strs ["eat", "tea", "tan", "ate", "nat&qu…

回归预测|基于鹅GOOSE优化LightGBM的数据回归预测Matlab程序 多特征输入单输出 2024年优化算法

回归预测|基于鹅GOOSE优化LightGBM的数据回归预测Matlab程序 多特征输入单输出 2024年优化算法| 文章目录 前言回归预测|基于鹅GOOSE优化LightGBM的数据回归预测Matlab程序 多特征输入单输出 2024年优化算法GOOSE-LightGBM 一、GOOSE-LightGBM模型原理&#xff1a;流程&#xf…

【STM32】IIC

超级常见的外设通信方式&#xff0c;一般叫做I方C。 大部分图片来源&#xff1a;正点原子HAL库课程 专栏目录&#xff1a;记录自己的嵌入式学习之路-CSDN博客 目录 1 基本概念 1.1 总线结构 1.2 IIC协议 1.3 软件模拟IIC逻辑 2 AT24C02 2.1 设备地址与…

华为手机数据丢失如何恢复?

在智能手机普及的今天&#xff0c;华为手机凭借其卓越的性能和用户体验赢得了众多用户的青睐。然而&#xff0c;在使用过程中&#xff0c;我们难免会遇到数据丢失或误删除的情况。面对这一困境&#xff0c;许多用户可能会感到束手无策。别担心&#xff0c;本文将为你提供一份全…

什么是响应式?

表达式: 用于表达式进行插值,渲染到页面之中 语法: {{ 表达式 }} 案例 <template><h1>{{ arr[2] }}</h1><h1>{{ 9 5 }}</h1><h1>{{ "神奇" }}</h1> </template><script setup> import { ref } from vue; …

react中配置Sentry

sentry 打开sentrySentry Docs | Application Performance Monitoring &amp; Error Tracking Software官网&#xff0c; 注册。根据提示创建应用后 在 React 应用中配置 Sentry 可以按照以下步骤进行&#xff1a; 安装 Sentry SDK: 在项目根目录下运行&#xff1a; npm in…

DDR5 Channel SI设计的挑战

DDR5延续了前几代数据速率不断提高的趋势。数据传输速度在3200至6400MT/s之间。同时将继续像前几代一样使用单端数据线的方式。为了帮助减少由高数据速率引起的信号完整性问题&#xff0c;DRAM端也会考虑加入判决反馈均衡&#xff08;DFE&#xff09;来减轻反射、ISI对信号传输…

十、Java异常

文章目录 一、异常简介二、异常体系图三、常见的异常3.1 常见的运行时异常3.2 常见的编译异常 四、异常处理4.1 异常处理的方式4.2 try-catch异常处理4.2.1 try-catch异常处理基本语法4.2.2 try-catch异常处理的注意细节 4.3 throws异常处理4.3.1 throws异常处理基本介绍4.3.2 …

Android - Windows平台下Android Studio使用系统的代理

这应该是第一篇Android的博文吧。以后应该会陆续更新的。记录学习Android的点点滴滴。 之前也看过&#xff0c;不过看完书就忘了&#xff0c;现在重拾Android&#xff0c;记录学习历程。 为何要用代理 因为更新gradle太慢了。 如何使用系统的代理 先找到系统代理的ip和端口。…

YOLO与PyQt5结合-增加论文工作量-实现一个目标检测的UI界面

这是个简单的界面&#xff0c;Qtdesigner支持各种界面&#xff0c;支持替换背景添加图标等。 接下来实现一个简单YOLO目标检测界面&#xff1a; 功能&#xff1a; 1、在窗口打开视频或图片进行目标检测&#xff0c;具有中断检测功能&#xff1a;比如检测视频的时候突然打开图…

速盾:cdn可以解决带宽问题么

一、速盾 CDN 的基本概念 CDN&#xff08;Content Delivery Network&#xff09;即内容分发网络&#xff0c;速盾 CDN 是这一技术的具体应用。它的工作原理是通过在全球多地部署服务器节点&#xff0c;将网站的内容缓存到这些节点上。 速盾 CDN 具有诸多优势。首先&#xff0…

分布式百万商户架构之缓存技术 本地化及未来之窗行业应用跨平台架构

如果数据读取速度比文件读取慢&#xff0c;将数据缓存到文件有以下优点&#xff1a; 一、提高读取效率 当需要反复访问某些数据时&#xff0c;从缓存文件中读取可以大大减少读取时间。因为文件系统通常会对文件进行一定程度的优化&#xff0c;使得文件的读取更加高效。而相比之…

优雅回收多个成员变量内存——使用函数模板实现内存安全释放

目录 从析构类中的多个成员说起什么是函数模板使用函数模板 从析构类中的多个成员说起 你有没有遇到过这种情况&#xff0c;一个类的构造函数中new了很多个成员变量&#xff0c;在析构函数中回收内存时&#xff0c;写了一遍又一遍 下面的代码&#xff1a; if (ptr ! nullptr)…

EXCEL文件如何批量加密,有什么方法

EXCEL文件的加密&#xff0c;通常在EXCEL软件上进行设置&#xff0c;它有打开密码与写保护密码&#xff0c;如果有多个文件的话&#xff0c;想通过一键设置的方法进行密码设置&#xff0c;那么它通常需要用到第三方软件进行批处理&#xff0c;因为EXCEL软件只能对当前打开的文件…

Wan-本科阶段部分作品

1、简易无接触温度测量与身份识别装置&#xff08;电赛 省一&#xff09; 2、基于交叉带式分拣结构的智能垃圾分类系统&#xff08;工训赛 省二&#xff09; 3、基于STM32的智能语音风扇&#xff08;大创优秀结题&#xff09;

鸿蒙界面开发(八):Grid网格布局Badge角标组件

Badge角标组件 在目标组件的外层包裹一层Badge角标组件 支持位置&#xff1a;右上&#xff0c;左&#xff0c;右 也可以使用绝对定位实现更灵活的角标位置。 Badge({count:1,//角标数值&#xff0c;角标数值为0时不展示position:BadgePosition.RightTop,//角标位置&#xff0…

【工作实践】MVEL 2.x语法指南

目录标题 MVEL 2.x语法指南一、基本语法1. 简单属性表达式2. 复合语句3. 返回值 二、值判断1. 判断空值2. 判断Null值3. 强制转换 三、内联Lists、Maps和数组Arrays1. Lists2. Maps3. 数组Arrays4. 数组强制转换 四、属性导航1. Bean属性2. Bean的安全属性导航3. 集合(1). List…

BOSS AI

BOSS AI 人工智能一点也不智能啊&#xff0c;机器人都不考虑用户的需求和体验吗&#xff1f; 这么多&#xff0c;我怎么看&#xff0c;我也不知道对面是人呢&#xff1f;还是机器人&#xff1f; 然后推送的东西也不知道我想要的&#xff0c;难道年龄到了&#xff0c;就活该天…

在 Windows 11上安装 .NET Framework 3.5

在 Windows 11上安装 .NET Framework 3.5 在控制面板中启用 .NET Framework 3.5 在安装某些软件时&#xff0c;会弹出以下界面&#xff0c;显示需要安装【 .NET Framework 3.5】。 安装微软官方建议进行安装&#xff1a; Microsoft-https://learn.microsoft.com/zh-cn/dotnet…