?前言

大家好，我是yma16，本文分享關(guān)于 node+vue3+mysql前后分離開發(fā)范式——實(shí)現(xiàn)視頻文件上傳并渲染。
技術(shù)選型
前端：vite+vue3+antd
后端：node koa
數(shù)據(jù)庫：mysql

koa是一個(gè)現(xiàn)代的Node.js框架，可以用來構(gòu)建Web應(yīng)用程序。

Node.js的mime庫

Node.js的mime庫是用于根據(jù)文件擴(kuò)展名獲取對應(yīng)的MIME類型的庫。MIME類型是用于標(biāo)識文件類型的一種標(biāo)準(zhǔn)，它在互聯(lián)網(wǎng)通信中起到了非常重要的作用。MIME庫使得開發(fā)者可以方便地根據(jù)文件擴(kuò)展名獲取對應(yīng)的MIME類型，從而在處理文件時(shí)能夠正確地設(shè)置Content-Type頭。

mime庫的發(fā)展可以追溯到2010年，最早由TJ Holowaychuk創(chuàng)建。最初版本的mime庫是一個(gè)簡單的JavaScript對象，其中包含了一些常見文件擴(kuò)展名和對應(yīng)的MIME類型。用戶可以通過調(diào)用mime.lookup()方法，傳入文件擴(kuò)展名來獲取對應(yīng)的MIME類型。

隨著時(shí)間的推移，mime庫得到了越來越多的貢獻(xiàn)和改進(jìn)。根據(jù)用戶的反饋和需求，mime庫逐漸添加了更多的文件擴(kuò)展名和對應(yīng)的MIME類型。同時(shí)，mime庫還提供了一些其他的方法，如mime.extension()用于通過MIME類型獲取對應(yīng)的文件擴(kuò)展名，mime.getType()用于根據(jù)文件名獲取MIME類型等。

近年來，隨著Web技術(shù)的發(fā)展和Node.js的流行，mime庫的使用越來越廣泛。它被大量應(yīng)用于Web開發(fā)中，特別是在處理靜態(tài)文件時(shí)。由于mime庫的簡單易用性和快速性能，它逐漸成為了Node.js開發(fā)者的首選庫之一。

目前，mime庫已經(jīng)發(fā)展到了較為成熟的階段。它在GitHub上擁有超過2萬的星標(biāo)，表明了它的受歡迎程度和廣泛使用。同時(shí)，mime庫也在不斷更新和維護(hù)，以適應(yīng)新的需求和文件類型的變化。

該系列往期文章
前端vite+vue3結(jié)合后端node+koa——實(shí)現(xiàn)代碼模板展示平臺（支持模糊搜索+分頁查詢）
node+vue3+mysql前后分離開發(fā)范式——實(shí)現(xiàn)對數(shù)據(jù)庫表的增刪改查

? 功能設(shè)計(jì)與實(shí)現(xiàn)

文件映射表：
記錄文件的位置，方便讀取
file_map的表結(jié)構(gòu)

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 '創(chuàng)建人',
  `create_time` datetime(0) NULL DEFAULT NULL COMMENT '創(chuàng)建時(shí)間',
  `update_time` datetime(0) NULL DEFAULT NULL COMMENT '更新時(shí)間',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_0900_ai_ci ROW_FORMAT = Dynamic;

SET FOREIGN_KEY_CHECKS = 1;

表結(jié)構(gòu)

?? node上傳文件寫入file_map映射表

限制上傳的類型，用戶名根據(jù)jwt的請求頭獲取
上傳視頻接口編寫如下：文章來源地址http://www.zghlxwxcb.cn/news/detail-827079.html

// 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? 

到了這里，關(guān)于node+vue3+mysql前后分離開發(fā)范式——實(shí)現(xiàn)視頻文件上傳并渲染的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！