首页 > 其他分享 >mvc+layui上传视频

mvc+layui上传视频

时间:2023-08-25 09:14:13浏览次数:40  
标签:function layui upload mvc file res var 上传

 

一、  视频上传

1、  前端:

<div class="layui-container">

    <div class="layui-row">

        <div class="layui-col-md6">

            <div class="layui-upload">

                <button type="button" class="layui-btn" id="uploadVideoBtn">上传视频</button>

            </div>

        </div>

    </div>

</div>

<script>

    //视频上传

    layui.use('upload', function () {

        var upload = layui.upload;

 

        // 执行上传视频

        var uploadInst = upload.render({

            elem: '#uploadVideoBtn', // 指定上传按钮的容器 ID

            url: 'https://localhost:7106/api/RoomType/UploadVideo', // 替换为你实际的视频上传地址

            accept: 'video', // 只接受视频文件

            size: 30 * 1024, // 设置视频最大大小为30MB,单位为KB

            done: function (res) { // 上传成功的回调函数

                console.log(res); // 在控制台打印服务器返回的数据

 

                if (res.message === "上传成功") { // 假设服务器返回的状态码为 0 表示上传成功

                    var videoUrl = res.data; // 假设视频地址存储在 data 字段中

                    console.log("视频地址:" + videoUrl);

                } else {

                    layer.msg(res.message);

                }

            },

            error: function () { // 上传失败的回调函数

                layer.msg("上传失败");

            }

        });

    });

</script>

2、  后端:

private readonly IMediator mediator;

        private readonly IWebHostEnvironment environment;

 

        public RoomTypeController(IMediator mediator, IWebHostEnvironment environment)

        {

            this.mediator = mediator;

            this.environment = environment;

        }

/// <summary>

        /// 视频上传

        /// </summary>

        /// <returns></returns>

        // POST: api/video/upload

        [HttpPost]

        public async Task<IActionResult> UploadVideo()

        {

            try

            {

                var contentLength = HttpContext.Request.ContentLength;

 

                if (contentLength != null && contentLength > 31457280) // 判断请求体是否超过30MB(30 * 1024 * 1024字节)

                {

                    return BadRequest(new { error = "请求体的大小超过了30MB" });

                }

 

                var file = Request.Form.Files[0]; // 获取上传的文件

 

                if (file.Length > 0)

                {

                    var fileName = Guid.NewGuid().ToString() + Path.GetExtension(file.FileName); // 生成唯一的文件名

 

                    var filePath = Path.Combine(environment.WebRootPath, "Video", fileName); // 设置保存文件的路径

 

                    using (var stream = new FileStream(filePath, FileMode.Create))

                    {

                        await file.CopyToAsync(stream); // 将文件保存到指定路径

                    }

 

                    var videoUrl = Url.Content("~/Video/" + fileName); // 构建视频地址

 

                    // 在这里可以进一步处理视频信息,例如将文件路径或其他相关信息保存到数据库中

 

                    // 返回上传成功的响应,包含视频地址

                    return Ok(new { message = "上传成功", data = videoUrl });

                }

 

                // 如果没有上传任何文件,返回上传失败的响应

                return BadRequest(new { error = "没有选择任何文件" });

            }

            catch (Exception ex)

            {

                // 返回上传失败的响应

                return StatusCode(500, new { error = "上传失败:" + ex.Message });

            }

        }

 

二、  图片上传

1、  前端

<div class="layui-upload">

                                <button type="button" class="layui-btn" id="ID-upload-demo-btn-2">

                                    <i class="layui-icon layui-icon-upload"></i> 上传图片

                                </button>

                                <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 11px;">

                                    <div class="layui-upload-list" id="upload-demo-preview"></div>

                                </blockquote>

                            </div>

<button type="button" class="layui-btn" id="ID-upload-demo-btn">

                                <i class="layui-icon layui-icon-upload"></i> 单图片上传

                            </button>

                            <div style="width: 132px;">

                                <div class="layui-upload-list">

                                    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">

                                    <div id="ID-upload-demo-text"></div>

                                </div>

                                <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">

                                    <div class="layui-progress-bar" lay-percent=""></div>

                                </div>

                            </div>

//图片上传

    layui.use(function () {

        var upload = layui.upload;

        var layer = layui.layer;

        var element = layui.element;

        var $ = layui.$;

        // 单图片上传

        var uploadInst = upload.render({

            elem: '#ID-upload-demo-btn',

            url: 'http://10.31.56.10:9992/api/RoomType/UploadImage', // 替换为你自己的上传接口地址

            before: function (obj) {

                // 预读本地文件示例,不支持ie8

                obj.preview(function (index, file, result) {

                    $('#ID-upload-demo-img').attr('src', result); // 图片链接(base64)

                });

 

                element.progress('filter-demo', '0%'); // 进度条复位

                layer.msg('上传中', { icon: 16, time: 0 });

            },

            done: function (res) {

                // 若上传失败

                if (res == "" || res == null) {

                    return layer.msg('上传失败');

                }

 

                // 上传成功,保存图片路径到变量中

                vrDisplay = res;

 

                // 上传成功的一些操作

                // …

                $('#ID-upload-demo-text').html(''); // 置空上传失败的状态

            },

            error: function () {

                // 演示失败状态,并实现重传

                var demoText = $('#ID-upload-demo-text');

                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');

                demoText.find('.demo-reload').on('click', function () {

                    uploadInst.upload();

                });

            },

            // 进度条

            progress: function (n, elem, e) {

                element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用

                if (n == 100) {

                    layer.msg('上传完毕', { icon: 1 });

                }

            }

        });

        // 多图片上传

        upload.render({

            elem: '#ID-upload-demo-btn-2',

            url: 'http://10.31.56.10:9992/api/RoomType/UploadImage', // 此处用的是第三方的 http 请求演示,实际使用时改成您自己的上传接口即可。

            multiple: true,

            before: function (obj) {

                // 预读本地文件示例,不支持ie8

                obj.preview(function (index, file, result) {

                    $('#upload-demo-preview').append('<img src="' + result + '" alt="' + file.name + '" style="width: 90px; height: 90px;">')

                });

            },

            done: function (res) {

                for (var i = 0; i < res.length; i++) {

                    roomTypePicture.push(res[i]); // 将图片路径添加到 roomTypePicture 数组中

                }

                console.log(roomTypePicture.toString()) // 打印 roomTypePicture 数组,用于调试

            }

        });

    });

2、  后端

/// <summary>

        /// 图片上传

        /// </summary>

        /// <param name="file"></param>

        /// <returns></returns>

        [HttpPost]

        public async Task<IActionResult> UploadImage()

        {

            var files = Request.Form.Files; // 获取上传的文件集合

 

            if (files == null || files.Count == 0)

            {

                return BadRequest("没有选择上传的文件");

            }

 

            List<string> fileUrls = new List<string>();

 

            foreach (var file in files)

            {

                var filePath = await UploadImage(file); // 调用封装的上传图片方法

 

                if (filePath != null)

                {

                    fileUrls.Add(filePath);

                }

                else

                {

                    return BadRequest("文件上传失败");

                }

            }

 

            // 在此处处理上传成功的逻辑,如将文件路径存储到数据库或返回给客户端等

 

            return Ok(fileUrls); // 返回上传成功的图片路径列表

        }

        /// <summary>

        /// 图片上传

        /// </summary>

        /// <param name="file"></param>

        /// <returns></returns>

        private async Task<string> UploadImage(IFormFile file)

        {

            if (file == null || file.Length == 0)

            {

                return null;

            }

 

            var fileName = file.FileName;

            var fileExtension = Path.GetExtension(fileName);

            var uniqueFileName = Guid.NewGuid().ToString("N") + fileExtension;

 

            var fileDirectory = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "File");

            var filePath = Path.Combine(fileDirectory, uniqueFileName);

 

            using (var stream = new FileStream(filePath, FileMode.Create))

            {

                await file.CopyToAsync(stream);

            }

 

            return filePath;

        }

 

 

标签:function,layui,upload,mvc,file,res,var,上传
From: https://www.cnblogs.com/qibaidao/p/17655964.html

相关文章

  • WebUploader实现大文件上传下载
    ​ASP.NET上传文件用FileUpLoad就可以,但是对文件夹的操作却不能用FileUpLoad来实现。下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压。ASP.NET页面设计:TextBox和Button按钮。 ​编辑TextBox中需要自己受到输入文件夹的路径(包含文件夹),通过Button......
  • VUE- elementUI使用quill富文本编辑器(编辑文本、上传图片)
    准备工作:安装 yarninstall vue-quill-editormain.js//编辑器importVueQuillEditorfrom'vue-quill-editor'//引入样式import'quill/dist/quill.core.css'import'quill/dist/quill.snow.css'import'quill/dist/quill.bubble.css'......
  • vue实现大文件上传下载
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传  可以带参数        [HttpPost("upload")]        publicJsonResultuploadProject(I......
  • javascript实现大文件上传下载
    ​ IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag        客户端每次提交下载请求时,服务端都要添加这两个响应头,以保证客户端和服务端将此下载识别为可以断点续......
  • vue中,一个参数是一个图片网络地址,当重新上传一个图片替换原来的图片后,地址没变,但是图
    这个问题可能是由于浏览器缓存导致的。为了解决这个问题,你可以向图片的URL地址中添加一个随机参数,以确保每次加载图片时都会从服务器获取最新的图片。你可以使用类似于以下方式来添加随机参数:<img:src="imageUrl+'?timestamp='+Date.now()"/>这样,每次你更新了图片后,URL中......
  • js实现大文件上传下载
    ​ 一、概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了。一般断点下载时才用到Range和Content-Range实体头。HTTP协议本身不支持断点上传,需要自己实现。 二、Range  用于请求头......
  • php实现大文件上传下载
    ​ 前段时间做视频上传业务,通过网页上传视频到服务器。视频大小小则几十M,大则1G+,以一般的HTTP请求发送数据的方式的话,会遇到的问题:1,文件过大,超出服务端的请求大小限制;2,请求时间过长,请求超时;3,传输中断,必须重新上传导致前功尽弃; 解决方案:1,修改服务端上传的限制配置;Nginx以......
  • jsp实现大文件上传下载
    ​ 这里只写后端的代码,基本的思想就是,前端将文件分片,然后每次访问上传接口的时候,向后端传入参数:当前为第几块文件,和分片总数下面直接贴代码吧,一些难懂的我大部分都加上注释了:上传文件实体类:看得出来,实体类中已经有很多我们需要的功能了,还有实用的属性。如MD5秒传的信息。pub......
  • java实现大文件上传下载
    ​ 我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用。这次项目的需求:支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,ie8,ie9,Chrome,Firefox,360安全浏览器,并且刷新浏览器后仍然能够续传,重启浏览器(关闭......
  • java实现大文件上传功能
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1.通过form表单向后端发送请求         <formid="postForm"action="${pageContext.request.contextPath}/UploadServlet"method="post"e......