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

文章目录

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

⭐前言

大家好，���是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 mvrouter.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?