首页 > 编程语言 >ASP.NET MVC+LayUI视频上传

ASP.NET MVC+LayUI视频上传

时间：2024-09-04 13:53:36浏览次数：13  
标签：视频 ASP string 文件 LayUI MVC NET 上传

前言

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

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

HTTP Error 404.13 - Not Found。

ASP.NET MVC+LayUI视频上传_ide

异常原因分析：

由上图我们可以清楚的知道因为我们所上传的视频内容藏毒超过了配置的值，所以上传失败了，并且还告诉我们需要到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 版本。对于生产环境，该属性不是必需的，可以禁用。

视频上传效果演示如下

ASP.NET MVC+LayUI视频上传_上传_02

前端使用LayUI的视频组件提交视频以二进制的文件格式提交到后端服务接口

1、首先引入相关的layUI相关的js和css文件包：

ASP.NET MVC+LayUI视频上传_上传_03

2、在页面中导入相关引用：

ASP.NET MVC+LayUI视频上传_ASP_04

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):

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://github.com/YSGStudyHards/VideoUpload

标签：视频,ASP,string,文件,LayUI,MVC,NET,上传
From： https://blog.51cto.com/u_13625604/11917558

相关文章

  • 利用分布式锁、本地锁在ASP.NET Core中实现防抖
    前言#在Web应用开发过程中，防抖（Debounce）是确保同一操作在短时间内不会被重复触发的一种有效手段。常见的场景包括防止用户在短时间内重复提交表单，或者避免多次点击按钮导致后台服务执行多次相同的操作。无论在单机环境中，还是在分布式系统中都有一些场景需要使用它。本文将介绍......
  • 利用分布式锁在ASP.NET Core中实现防抖
    前言在Web应用开发过程中，防抖（Debounce）是确保同一操作在短时间内不会被重复触发的一种有效手段。常见的场景包括防止用户在短时间内重复提交表单，或者避免多次点击按钮导致后台服务执行多次相同的操作。无论在单机环境中，还是在分布式系统中都有一些场景需要使用它。本文将介绍如......
  • Blender多角度深度图depth map渲染，MVCNN数据生成
    现在在网上已有开源代码来生成论文中推荐的Phong渲染多视图，代码解析如下：https://blog.csdn.net/jorg_zhao/article/details/88345324，代码链接大佬传在了github上：https://github.com/zeaggler/ModelNet_Blender_OFF2Multiview该代码包针对phong渲染提供了Blender配置文件，渲......
  • SpringBoot项目常用配置文件MybatisPlusConfig、RedisConfig、RedissonConfig、Swagge
    MybatisPlusConfig:@Configuration@MapperScan("com.yupi.usercenter.mapper")publicclassMybatisPlusConfig{@BeanpublicMybatisPlusInterceptormybatisPlusInterceptor(){MybatisPlusInterceptorinterceptor=newMybatisPlusInterc......
  • 《JavaEE进阶》----9.＜SpringMVC实践项目：【简易对话留言板（数据存在数据库中）】＞
    本篇博客讲解设计的一个网页版简易对话留言板。这个是将数据存在数据库中。我们通过链接本地数据库。在这里面存入的数据。此时数据存在在硬盘中，只要数据不被删除，硬盘不损坏。那么这些数据就会被永久保存引入的依赖：配置数据库：spring:datasource:#数据库连接配置......
  • 借助图形控件Aspose.PSD， 在 Java 中绘制几何形状
    最近，我们使用Aspose.PSDforJava实现了绘制诸如日食和线条等形状的功能。然而，这篇博文将更进一步，向您展示如何在Java中绘制几何形状。幸运的是，您可以使用这个Java绘图库以编程方式执行此操作，因为它是一个完整的包，可以在Java应用程序中处理形状。因此，没有额外的要求，我们可......
  • MVCC详解，深入浅出简单易懂
    转载自https://blog.csdn.net/lans_g/article/details/124232192一、什么是MVCC？mvcc，也就是多版本并发控制，是为了在读取数据时不加锁来提高读取效率和并发性的一种手段。数据库并发有以下几种场景：读-读：不存在任何问题。读-写：有线程安全问题，可能出现脏读、幻读、不可重复读......
  • MVC与设计模式理解-lnmp学习之路
    一、MVC前言：        MVC是一种应用架构模式，也可以说是一种业务架构或是一种应用设计思想，用于组织业务逻辑并分离代码的。        MVC组成结构是Model-View-Controller，Model是管控数据层，View是管控视图层，Controller是管控业务逻辑层。举例：       ......
  • 设计模式中的单一职责: 一个MVC 场景的讨论
    在MVC模型中，M代表模型。M中的信息可以访问到模型的信息。我们在很多代码中看到，有些模型也负责draw自身的逻辑。一个模型知道如何画自身似乎是很合理的。如果细想一下，draw跟模型中的其他功能相比，似乎是一个别的职责。模型是否应该拥有此职责!呢？放在模型中的影响：因为draw......
  • Vue面试常见知识总结2——spa、vue按需加载、mvc与mvvm、vue的生命周期、Vue2与Vue3区
    SPASPA（SinglePageApplication，单页面应用）是一种Web应用程序架构，其核心特点是在用户与应用程序交互时，不重新加载整个页面，而是通过异步加载页面的局部内容或使用JavaScript动态更新页面。以下是对SPA的详细解析，包括其优点和缺点：SPA的优点更好的用户体验：SPA无需重新加载......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99