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

文章目录

    • ⭐前言
    • ⭐ 功能设计与实现
      • 💖 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.mzph.cn/news/685891.shtml

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

相关文章

JVM-垃圾回收(标记算法,收集器)

申明:文章内容是本人学习极客时间课程所写,文字和图片基本来源于课程资料,在某些地方会插入一点自己的理解,未用于商业用途,侵删。 原资料地址:课程资料 垃圾回收的基本原理 1 什么是垃圾? 在…

阿里云ECS香港服务器性能强大_安全可靠香港免备案服务器

阿里云香港服务器中国香港数据中心网络线路类型BGP多线精品,中国电信CN2高速网络高质量、大规格BGP带宽,运营商精品公网直连中国内地,时延更低,优化海外回中国内地流量的公网线路,可以提高国际业务访问质量。阿里云服务…

视觉slam十四讲学习笔记(六)视觉里程计 1

本文关注基于特征点方式的视觉里程计算法。将介绍什么是特征点,如何提取和匹配特征点,以及如何根据配对的特征点估计相机运动。 目录 前言 一、特征点法 1 特征点 2 ORB 特征 FAST 关键点 BRIEF 描述子 3 特征匹配 二、实践:特征提取…

《Linux 简易速速上手小册》第2章: 命令行的艺术(2024 最新版)

文章目录 2.1 基本 Linux 命令2.1.1 重点基础知识2.1.2 重点案例:整理下载文件夹2.1.3 拓展案例 1:批量重命名文件2.1.4 拓展案例 2:查找并删除特定文件 2.2 文件和目录管理2.2.1 重点基础知识2.2.2 重点案例:部署一个简单的网站2…

SpringMVC速成(二)

文章目录 SpringMVC速成(二)1.SSM整合1.1 流程分析1.2 整合配置步骤1:创建Maven的web项目步骤2:添加依赖步骤3:创建项目包结构步骤4:创建SpringConfig配置类步骤5:创建JdbcConfig配置类步骤6:创建MybatisConfig配置类步骤7:创建jdbc.properti…

《Go 简易速速上手小册》第2章:控制结构与函数(2024 最新版)

文章目录 2.1 条件语句:决策的艺术2.1.1 基础知识讲解2.1.2 重点案例:用户角色权限判断实现用户角色权限判断扩展功能实现代码功能扩展:添加或删除用户 2.1.3 拓展案例 1:成绩等级判断实现成绩等级判断功能实现代码扩展功能&#…

Electron实战之进程间通信

进程间通信(IPC)并非仅限于 Electron,而是源自甚至早于 Unix 诞生的概念。尽管“进程间通信”这个术语的确创造于何时并不清楚,但将数据传递给另一个程序或进程的理念可以追溯至 1964 年,当时 Douglas McIlroy 在 Unix…

Windows 连接共享文件夹 切换/退出账号操作

工作中遇到个问题,登录公司内部共享文件夹,使用自己的账号,但需要切换别人账号找东西时,没有发现登出的地方。在网上找了两种方法:通过命令行登出账号的方法 (1)打开cmd命令提示符,…

对待不合理需求,前端工程师如何优雅的say no!

曾经有位老板, 每次给前端提需求,前端都说实现不了,后来他搜索了一下,发现网上都有答案。他就在招聘要求上加了条:麻烦你在说不行的时候,搜索一下。 上面是一个段子,说的有点极端了,…

Java集合篇之深入解析ArrayList,这六问你答的上来吗?

写在开头 开年第一篇,先祝各位新的一年身体健康,学业有成,事业有成哈,春节期间就是咔咔乱吃,咔咔乱玩,把学习都抛一边子去了,已经9天没有学习了,深深的懊悔,从今天开始&…

Leetcode1423.可获得的最大点数

文章目录 题目原题链接思路(逆向思维) 题目 原题链接 Leetcode1423.可获得的最大点数 思路(逆向思维) 由题目可知,从两侧选k张,总数为n张,即从中间选n - k张 nums总和固定,要选k张最…

[CTF]-PWN:C++文件更换libc方法(WSL)

C文件与C文件更换libc有很多不一样的地方,我是在写buu的ciscn_2019_final_3才意识到这个问题,C文件只需要更换libc和ld就可以了,但是C文件不同,除了更换libc和ld,它还需要更换libstdc.so.6和libgcc_s.so.1 更换libc和…

[SWPUCTF 2021 新生赛]crypto8

第一眼看见是乱码不确定是什么的编码 看了下感觉是UUencode编码 UUencode编码是一种古老的编码方式,通常用于将二进制数据转换成可打印字符的形式。UUencode编码采用一种基于64个字符的编码表,将每3个字节的数据编码为4个可打印字符,以实现…

vue导出word文档(图文示例)

第076个 查看专栏目录: VUE 本文章目录 示例说明示例效果图导出的文件效果截图示例源代码参数说明:重要提示:API 参考网址 示例说明 在Vue中导出Word文档,可以使用第三方库file-saver和html-docx-js。首先需要安装这两个库: npm …

库的操作【数据库】

目录 一、创建数据库 二、删除数据库 ​编辑 三、数据库编码问题 四、库的改查 查 1)查有哪些数据库: 2)使用某个数据库: 3)当前在哪个数据库: 4)有谁在使用 改alter 五、备份和恢复 …

JDK8新增的时间

设计更合理,功能更丰富,使用更方便,都是不可变的对象,修改后会返回新的事件对象不会丢失最开始的时间,线程安全,能精确到毫秒、纳秒。 这三个类都有一个静态方法now():获取系统当前时间对应的该…

Linux常用命令总结-2

文章目录 1. 关闭防火墙2. 用户组管理3. 系统的性能监控 1. 关闭防火墙 service iptables stop2. 用户组管理 1.添加用户 useradd 用户名需要在root用户下,否则没有权限 2. 删除用户 userdel 用户名3. 修改用户密码 passwd 用户名3. 系统的性能监控 1.监控cp…

Day01 javaweb开发——tlias员工管理系统

任务介绍 完成部门管理和员工管理的增删改查功能 环境搭建 前端---->后端---->数据库 准备数据库表创建springboot工程(web、mybatis、mysql驱动、lombok)application.properties中引入mybatis配置信息,准备对应的实体类准备三层架…

计算机组成原理:存储系统【四】

🌈个人主页:godspeed_lucip 🔥 系列专栏:计算机组成与原理基础 1 外存储器1.1 总览1.2 磁盘存储器1.2.1 磁盘设备的组成1.2.2 磁盘的性能指标1.2.3 磁盘的地址1.2.3 磁盘的工作过程 1.3 磁盘阵列1.3.1 解释1.3.2 分类 1.4 总结 2 …

map的key重复问题

一种需要key重复的Map 实例结果 IdentityHashMap<>(); dentityHashMap 类&#xff08;存在于java.util包中&#xff09;是一个 基于HashTable的 Map 接口的实现&#xff0c;从Java 1.4版本开始就已经存在。 这个类不是一个通用的Map 实现。尽管这个类实现了Map 接口&…