node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染

news2024/12/23 18:45:16

文章目录

    • ⭐前言
    • ⭐ 功能设计与实现
      • 💖 node上传文件写入file_map映射表
      • 💖 vue3前端上传文件回显
    • ⭐ 效果
    • ⭐结束

yma16-logo

⭐前言

大家好,我是yma16,本文分享关于 node+vue3+mysql前后分离开发范式——实现视频文件上传并渲染。
技术选型
前端:vite+vue3+antd
后端:node koa
数据库:mysql

koa是一个现代的Node.js框架,可以用来构建Web应用程序。

Node.js的mime库

Node.js的mime库是用于根据文件扩展名获取对应的MIME类型的库。MIME类型是用于标识文件类型的一种标准,它在互联网通信中起到了非常重要的作用。MIME库使得开发者可以方便地根据文件扩展名获取对应的MIME类型,从而在处理文件时能够正确地设置Content-Type头。

mime库的发展可以追溯到2010年,最早由TJ Holowaychuk创建。最初版本的mime库是一个简单的JavaScript对象,其中包含了一些常见文件扩展名和对应的MIME类型。用户可以通过调用mime.lookup()方法,传入文件扩展名来获取对应的MIME类型。

随着时间的推移,mime库得到了越来越多的贡献和改进。根据用户的反馈和需求,mime库逐渐添加了更多的文件扩展名和对应的MIME类型。同时,mime库还提供了一些其他的方法,如mime.extension()用于通过MIME类型获取对应的文件扩展名,mime.getType()用于根据文件名获取MIME类型等。

近年来,随着Web技术的发展和Node.js的流行,mime库的使用越来越广泛。它被大量应用于Web开发中,特别是在处理静态文件时。由于mime库的简单易用性和快速性能,它逐渐成为了Node.js开发者的首选库之一。

目前,mime库已经发展到了较为成熟的阶段。它在GitHub上拥有超过2万的星标,表明了它的受欢迎程度和广泛使用。同时,mime库也在不断更新和维护,以适应新的需求和文件类型的变化。

该系列往期文章
前端vite+vue3结合后端node+koa——实现代码模板展示平台(支持模糊搜索+分页查询)
node+vue3+mysql前后分离开发范式——实现对数据库表的增删改查

⭐ 功能设计与实现

文件映射表:
记录文件的位置,方便读取
file_map的表结构

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;

-- ----------------------------
-- Table structure for file_map
-- ----------------------------
DROP TABLE IF EXISTS `file_map`;
CREATE TABLE `file_map`  (
  `id` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL COMMENT 'id',
  `type` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '类型',
  `path` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '路径',
  `create_user` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '创建人',
  `create_time` datetime(0) NULL DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新时间',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

表结构
在这里插入图片描述

💖 node上传文件写入file_map映射表

限制上传的类型,用户名根据jwt的请求头获取
上传视频接口编写如下:

// upload mv
router.post('/upload/mv', async (ctx) => {
   
    try{
   
        // authorization是 Bearer + ' ' + jwt字符串
        const parts = ctx.header.authorization.trim().split(' ');
        const token = parts[1];
        const payload = jwtToken.verify(token, appKey);
        const {
   username} =payload;
        const usernamePath=username? 

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

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

相关文章

Python asyncio高性能异步编程 详解

目录 一、协程 1.1、greenlet实现协程 1.2、yield关键字 1.3、asyncio 1.4、async & await关键字 二、协程意义 三、异步编程 3.1、事件循环 3.2、快速上手 3.3、await 3.4、Task对象 3.5、asyncio.Future对象 3.5、concurrent.futures.Future对象 3.7、异步…

python+django+vue汽车票在线预订系统58ip7

本课题使用Python语言进行开发。基于web,代码层面的操作主要在PyCharm中进行,将系统所使用到的表以及数据存储到MySQL数据库中 使用说明 使用Navicat或者其它工具,在mysql中创建对应名称的数据库,并导入项目的sql文件; 使用PyChar…

软考 系统分析师系列知识点之信息系统战略规划方法(11)

接前一篇文章:软考 系统分析师系列知识点之信息系统战略规划方法(10) 所属章节: 第7章. 企业信息化战略与实施 第4节. 信息系统战略规划方法 7.4.7 价值链分析法 价值链分析(Value Chain Analysis,VCA&am…

BulingBuling - 《研究巴菲特》 [ Buffettology ]

研究巴菲特 使沃伦-巴菲特成为世界上最著名的投资者的那些以前未曾解释过的技术 作者:玛丽-巴菲特 Buffettology The Previously Unexplained Techniques That Have Made Warren Buffett The Worlds Most Famous Investor By Mary Buffett 内容提要 《Buffetto…

php数据类型以及运算符

php数据类型以及运算符 1. php数据类型2. 使用举例3. 运算符 1. php数据类型 包括 String(字符串)、Integer(整型)、Float(浮点型)、Boolean(布尔型)、Array(数组)、Object(对象)、NULL(空值) 2. 使用举例 1.字符串 2.整型 3.浮点型 4.布尔型 5.数组 6.对象 7.null 3. 运算符…

AI:129-基于深度学习的极端天气事件预警

🚀点击这里跳转到本专栏,可查阅专栏顶置最新的指南宝典~ 🎉🎊🎉 你的技术旅程将在这里启航! 从基础到实践,深入学习。无论你是初学者还是经验丰富的老手,对于本专栏案例和项目实践都有参考学习意义。 ✨✨✨ 每一个案例都附带有在本地跑过的关键代码,详细讲解供…

阿里云服务器服务费怎么计算的?详细报价解析

2024年最新阿里云服务器租用费用优惠价格表,轻量2核2G3M带宽轻量服务器一年61元,折合5元1个月,新老用户同享99元一年服务器,2核4G5M服务器ECS优惠价199元一年,2核4G4M轻量服务器165元一年,2核4G服务器30元3…

书生·浦语-模型评测opencompass

大预言模型评测 模型评测包括主管评测与客观评测 测试模型对提示词的敏感性,或通过提示词获得更准确地答案 主流评测框架 opencompass评测平台 作业

普中51单片机学习(一)

开发板功能和使用介绍 功能介绍 普中51-单核-A2开发板,采用单CPU设计,用的是STC公司生产的51内核芯片STC89C52,是一款拥有64KB FLASH超大存储器的51单片机。 五线四相步进电机驱动模块。使用ULN2003芯片,可驱动直流电机、五线…

多线程面试题汇总

多线程面试题汇总 一、多线程1、线程的生命周期2、线程的创建(函数创建)3、线程的创建(使用类)4、守护线程 二、全局解释器锁1、使用单线程实现累加到5000000002、使用多线程实现累加到5000000003、总结 三、线程安全1、多线程之数…

CCF编程能力等级认证GESP—C++7级—20231209

CCF编程能力等级认证GESP—C7级—20231209 单选题(每题 2 分,共 30 分)判断题(每题 2 分,共 20 分)编程题 (每题 25 分,共 50 分)商品交易纸牌游戏 答案及解析单选题判断题编程题1编程题2 单选题…

每日五道java面试题之java基础篇(十)

目录: 第一题 JVM有哪些垃圾回收器?第二题 垃圾回收分为哪些阶段?第三题 线程的⽣命周期?线程有⼏种状态?第四题.ThreadLocal的底层原理第五题.并发、并⾏、串⾏之间的区别 第一题 JVM有哪些垃圾回收器? ● 新⽣代收集…

【Web】CTFSHOW java刷题记录(全)

目录 web279 web280 web281 web282 web283 web284 web285 web286 web287 web288 ​web289 web290 web291 web292 web293 web294 web295 web296 web297 web298 web299 web300 web279 题目提示 url里告诉我们是S2-001 直接进行一个exp的搜 S2-001漏洞分析…

Python setattr函数

在Python编程中,setattr()函数是一个有用且灵活的内置函数,用于设置对象的属性值。它可以在运行时动态地设置对象的属性,无论是新建对象还是已有对象。本文将深入探讨setattr()函数的用法、语法、示例代码,并探讨其在实际编程中的…

(08)Hive——Join连接、谓词下推

前言 Hive-3.1.2版本支持6种join语法。分别是:inner join(内连接)、left join(左连接)、right join(右连接)、full outer join(全外连接)、left semi join(左…

qt 开发 “控件之家“

本篇文章我们来描述一下Qt 控件 是qt中最基本 也是最难缠的 有种“小鬼难缠的感觉” qt常用控件大集合 Qt是一个广泛使用的跨平台应用程序框架,它提供了许多用于构建图形用户界面(GUI)的控件。以下是一些Qt中常用的控件: QPushButton:这是…

MySQL数据库基础(四):图形化开发工具DataGrip

文章目录 图形化开发工具DataGrip 一、DataGrip介绍 二、DataGrip安装 三、创建工程 四、连接数据库 五、选择要使用的数据库 六、DataGrip软件设置 1、设置字体大小 2、设置关键字大写 3、自动排版 图形化开发工具DataGrip 一、DataGrip介绍 DataGrip是JetBrains公…

GPT-4带来的思想火花

GPT-4能够以其强大的生成能力和广泛的知识储备激发出众多思想火花。它能够在不同的情境下生成新颖的观点、独特的见解和富有创意的解决方案,这不仅有助于用户突破思维定势,还能促进知识与信息在不同领域的交叉融合。 1.GPT-4出色的创新思考和知识整合能…

计算机组成原理(3)-----外存储器

目录 一.磁盘存储器 1.磁盘设备的组成 2.磁盘的性能指标 3.磁盘地址 4.硬盘的工作过程 5.磁盘阵列 二.固态硬盘SSD 一.磁盘存储器 计算机的外存储器又称为辅助存储器,目前主要使用磁表面存储器。 所谓“磁表面存储”,是指把某些磁性材料薄薄地涂…

anomalib1.0学习纪实-续1:增加新算法

0、基本信息 现在我要增加一个新算法:DDAD 他的代码,可以在github中找到:GitHub - arimousa/DDAD 一、基础操作: 1、修改anomalib\src\anomalib\models\__init__.py 我增加的第33行和61行, 2、 增加ddad文件夹和文…