Layui上传组件upload如何限制上传视频的时长或分辨率

陌明大大_2424

陌明大大_2424

2026-05-05

262人浏览

原创

Layui upload 不支持直接校验视频时长或分辨率,需前端用 video 标签预检(有兼容性与性能限制)和服务端强制校验(如 ffprobe),二者结合才可靠。

layui upload 本身不支持校验视频时长或分辨率

layui 的 upload 组件只提供基础的文件类型(accept)、大小(size)和后缀(exts)限制,无法直接读取视频元信息。所谓“限制时长/分辨率”,必须在客户端预检或服务端二次校验,否则用户随便改个后缀就能绕过。

前端预检需用 FileReader + video 标签 + canvas(仅 Chrome/Firefox 支持)

可行但有严重限制:浏览器必须能解码该视频格式,且只适用于小文件(大视频 load 太慢甚至卡死)。关键步骤如下:

  • 监听 choose 回调,拿到 files[0]
  • 用 URL.createObjectURL(file) 创建临时地址
  • 动态创建 <video></video> 元素,onloadedmetadata 触发后读取 video.duration 和 video.videoWidth/video.videoHeight
  • 校验不通过就调用 upload.abort() 并提示用户

示例片段:

upload.render({
  elem: '#upload-video',
  url: '/api/upload',
  accept: 'video',
  exts: 'mp4|avi|mov',
  size: 1024 * 1024 * 500, // 500MB
  choose: function(obj) {
    const file = obj.files[0];
    if (!file || !/video\/.*/.test(file.type)) return;
<pre class="brush:php;toolbar:false;">const video = document.createElement('video');
video.preload = 'metadata';
video.onloadedmetadata = function() {
  if (video.duration > 600) { // 超过 10 分钟
    layer.msg('视频不能超过 10 分钟');
    obj.clear(); // 清空选择
    URL.revokeObjectURL(video.src);
    return;
  }
  if (video.videoWidth  {
  layer.msg('无法读取视频信息,请检查格式');
  obj.clear();
};
video.src = URL.createObjectURL(file);

} });

服务端必须做最终校验(强烈推荐)

前端校验可被跳过,所有关键规则必须在服务端落地。常见做法:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • Node.js 可用 ffprobe(来自 ffmpeg)解析:ffprobe -v quiet -show_entries format=duration:stream=width,height -of default=nw=1 input.mp4
  • Python 推荐 moviepy 或 ffmpeg-python,避免依赖系统 ffmpeg 安装
  • Java 可用 javacv 或调用 ffprobe 子进程
  • 校验失败立即返回 HTTP 400,并附带明确错误字段(如 "duration_too_long"),前端用 done 回调捕获并提示

注意兼容性与体验断点

用户上传超长视频时,前端预检可能卡住几秒甚至几十秒(尤其移动端),而服务端校验又得等完整上传完——这中间没有进度反馈,容易误以为卡死。建议:

  • 前端预检加 loading 提示,超时(如 8 秒)自动跳过,仅靠服务端兜底
  • 服务端开启分块上传(chunk)支持,配合 upload.setUploadOption 配置,实现断点续传和更早的元信息校验(比如首块上传后就 probe)
  • 不要信任 file.size 判断清晰度,MP4 可以是 1KB 却声明 4K 分辨率;必须实际解析流

真正可靠的方案永远是「前端轻量提示 + 服务端强制拦截」,任何只靠前端的限制都形同虚设。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2443

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5263

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6330

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

5898

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

843

5

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

2023.10.23

4031

6

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

2024.03.06

6908

6

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

2025.12.30

814

19

html5新老标签汇总
html5新老标签汇总

HTML5在2026年持续优化网页语义化与交互体验,不仅引入了如<header>、<nav>、<article>、<section>、<aside>、<footer>等结构化标签,还新增了<video>、<audio>、<canvas>、<figure>、<time>、<mark>等增强多媒体与

2025.12.30

694

12

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.9万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.1万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习