当前位置： 首页 > news >正文

express+mysql+vue,从零搭建一个商城管理系统7--文件上传，大文件分片上传

news 2026/4/13 5:32:01

提示：学习express，搭建管理系统

文章目录

  • 前言
  • 一、安装multer，fs-extra
  • 二、新建config/upload.js
  • 三、新建routes/upload.js
  • 四、修改routes下的index.js
  • 五、修改index.js
  • 六、新建上传文件test.html
  • 七、开启jwt验证token，通过login接口生成token
  • 总结

前言

需求：主要学习express，所以先写service部分

一、安装multer，fs-extra

npm install multer --save
npm install fs-extra --save

在这里插入图片描述

二、新建config/upload.js

upload.js

const fs = require('fs');
const fsExtra = require('fs-extra');
const path = require('path');
const rootDir = path.resolve(__dirname,'../upload/');
const temporaryDir = path.resolve(__dirname,'../upload/temporary/');
const errFun = (msg,code)=>{return {code:code||500,success:false,msg:msg||'操作失败'}
}
const sucFun = (data,msg)=>{return {code:200,success:true,msg:msg||'操作成功',data,}
}
const uploadUtil = {upload:(req)=>{const { fileMD5,chunkMD5 } = req.body;return new Promise ((resolve,reject)=>{const folderPath = temporaryDir+'/'+fileMD5;const filePath = temporaryDir+'/'+fileMD5+'/'+chunkMD5if(!fs.existsSync(folderPath))fs.mkdirSync(folderPath);fs.writeFile(filePath,req.file.buffer,(err)=>{if(err)reject(errFun('切片上传失败'));resolve(sucFun({},'上传成功'));})});},merge:async(req)=>{const {fileMD5,chunkMD5Arr,type} = req.body;const folderPath = temporaryDir+'/'+fileMD5;let chunkBufferArr = [];for(let i=0;i<chunkMD5Arr.length;i++){let chunkBuffer = await fs.readFileSync(folderPath+'/'+chunkMD5Arr[i]);chunkBufferArr.push(chunkBuffer);}console.log(chunkBufferArr)let fileurl = rootDir+'/images/'+fileMD5+'-'+(new Date().getTime())+'.'+type;fs.writeFile(fileurl,Buffer.concat(chunkBufferArr),(err)=>{if(err)errFun(fileMD5+'文件切片merge失败');sucFun({url:fileurl},'文件切片merge成功');//删除临时文件夹以及文件夹下的所有文件fsExtra.removeSync(folderPath);});}
}
module.exports = uploadUtil;

在这里插入图片描述

三、新建routes/upload.js

const uploadUtil = require('../config/upload');
//文件流的key与multer的single方法的参数param,必须保持一致，不一致接收不到文件流//fd.append('xxx',chunk);//multer().single('xxxx');const multer = require('multer');
const chunk = multer().single('chunk');const uploadRoutes = (router)=>{router.post('/upload/upload',chunk,async (req,res)=>{const result = await uploadUtil.upload(req);res.json(result);});router.post('/upload/merge',async (req,res)=>{const result = await uploadUtil.merge(req);res.json(result);});
}
module.exports = uploadRoutes;

在这里插入图片描述

四、修改routes下的index.js

const userRoutes = require('./user');
const uploadRoutes = require('./upload');
const routes = (router)=>{//user路由userRoutes(router);//upload路由uploadRoutes(router);
}module.exports = routes;

在这里插入图片描述

五、修改index.js

注释jwt的token验证，方便测试。如果打开验证，需要通过login接口生成token，上传文件request请求头部携带

const express = require('express');
const app = express();
const router = express.Router();
const jwt = require('./config/jwt');const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());const port = 1990;app.all('*',  (req, res, next) => {res.header('Access-Control-Allow-Origin', '*');res.header("Access-Control-Allow-Headers", "Authorization,token,content-type");res.header('Access-Control-Allow-Methods', '*');res.header('Content-Type', 'application/json;charset=utf-8');next();
});//全局验证token
// app.use('/*',(req,res,next)=>{
//     let notValidateData = ['/user/login','/user/register'];
//     if(notValidateData.indexOf(req.baseUrl)>-1)return next();
//     if((jwt.verify(req.headers.authorization||'')||{}).success)return next();
//     return res.json({success:false,code:500,msg:'token验证失败'});
// })//初始化路由
require('./routes/index')(router);app.use('/', router);
app.listen(port,()=>{console.log('http://localhost:'+port);
})

在这里插入图片描述

六、新建上传文件test.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>test upload</title>
</head>
<body><input type="file" onchange="goUpload(this.files)"><script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script><script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/blueimp-md5/2.16.0/js/md5.js"></script><script>const reader = new FileReader();const instance = axios.create({baseURL: 'http://localhost:1990/', //后台接口url+porttimeout: 5000,headers: {'Content-Type': 'multipart/form-data',"authorization":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyTmFtZSI6Imxvbmdsb25nYWdvMSIsInBhc3N3b3JkIjoibG9uZzEyMzQ1NiIsImlhdCI6MTcwOTIwMjQ1NiwiZXhwIjoxNzA5MjA2MDU2fQ.XztBbjm2BbeQB7-OIXX040xuNxR5gnioCCgNV2c5NGI",},withCredentials: false, // defaultresponseType: 'json', // defaultmaxContentLength: 2000,});//上传文件计数对象let postFileObj = {};//上传切片计数对象let postChunkObj = {};//组件上传文件const goUpload = (files)=>{postFileObj = {};postChunkObj = {};upload(files[0])}//上传文件const upload = async (file)=>{//文件blobconst fileBlob = file.slice(0,file.size);//文件hash，用作后端新建临时文件夹名和上传完成的文件命名参数  并且，相同文件内容(文件名可不同)进行上传，生成的fileMD5是相同的，如有需要，可根据存储的文件名判断，不需要重新上传const fileMD5 = await blodToString(fileBlob);//切片数组const chunks = fileToChunks(file);//切片hash 用来命名生成的临时文件，并在所有切片上传完成，按顺序，读取切片，生成文件，如果不按照顺序，生成文件会因为写入顺序不对而乱码const chunkMD5Arr = [];//初始化当前文件上传计数if(!postFileObj[fileMD5])postFileObj[fileMD5] = {count:1}for(let i=0;i<chunks.length;i++){const chunkMD5 = await blodToString(chunks[i]);chunkMD5Arr.push(chunkMD5);//初始化key为fileMD5的切片组postChunkObj[fileMD5] = {};//初始化key为fileMD5的切片组中key为chunkMD5的切片计数对象postChunkObj[fileMD5][chunkMD5] = {success:false,count:1}await postChunk(chunks[i],fileMD5,chunkMD5);}let postAllChunk = true;//判断切片是否都已上传完成for(let key in postChunkObj[fileMD5]){if(!postChunkObj[fileMD5][key].success){postAllChunk = false;break}}// 所有切片都已上传成功if(postAllChunk){//调用merge方法const typeArr = file.name.split('.');mergeChunks(fileMD5,chunkMD5Arr,typeArr[typeArr.length-1]);}else{//有切片上传失败，重新执行上传postFileObj[fileMD5].count++;if(postFileObj[fileMD5].count>10) return console.log('文件上传失败');//重新上传await upload(file);}}//blob转换成stringconst blodToString = (blob)=>{return new Promise((resolve,reject)=>{reader.onloadend = (e)=>{resolve(md5(e.target.result));}reader.readAsText(blob);});}//file转换成chunksconst fileToChunks = (file)=>{//切片数组let chunks = [];//每个chunk大小const chunkSize = 1024*128;//转换成多少个chunkconst chunkCount = Math.ceil(file.size/chunkSize);for(let i=0;i<chunkCount;i++){if(i==chunkCount-1){chunks.push(file.slice(i*chunkSize,file.size));}else{chunks.push(file.slice(i*chunkSize,(i+1)*chunkSize));}}return chunks;}//上传切片const postChunk = (chunk,fileMD5,chunkMD5)=>{let fd = new FormData();//文件流的key与multer的single方法的参数param,必须保持一致，不一致接收不到文件流/*** fd.append('xxx',chunk);* multer().single('xxxx');* **/fd.append('chunk',chunk);   fd.append('fileMD5',fileMD5);fd.append('chunkMD5',chunkMD5);let postCount = 0;return new Promise((resolve,reject)=>{instance.post('upload/upload',fd).then((res)=>{if(res.data&&res.data.success){postChunkObj[fileMD5][chunkMD5].success = true;resolve(console.log(`上传切片${chunkMD5}成功`));}else{//记录当前切片上传次数postChunkObj[fileMD5][chunkMD5].count++;//当前切片上传超过10次，终止上传if(postChunkObj[fileMD5][chunkMD5].count<11) { //上传失败，重新上传postChunk(chunk,fileMD5,chunkMD5);}}resolve(console.log(`上传切片${chunkMD5}失败`))})});}//合并多个chunkmergeChunks = (fileMD5,chunkMD5Arr,type)=>{// let fd = new FormData();// fd.append('chunk',Buffer.form(''));   // fd.append('fileMD5',fileMD5);// fd.append('chunkMD5Arr',chunkMD5Arr);// fd.append('type',type);// instance.post('upload/merge',fd).then((res)=>{// });axios.post('http://localhost:1990/upload/merge',{fileMD5,chunkMD5Arr,type}).then((res)=>{});}</script></body>
</html>

七、开启jwt验证token，通过login接口生成token

添加用户
url:http://localhost:1990/user/login
name:/user/login
parans:{
“userName”: “longlongago1”,
“password”: “long123456”
}
在这里插入图片描述

总结

踩坑路漫漫长@~@

相关文章：

express+mysql+vue,从零搭建一个商城管理系统7--文件上传，大文件分片上传

提示&#xff1a;学习express&#xff0c;搭建管理系统 文章目录 前言一、安装multer&#xff0c;fs-extra二、新建config/upload.js三、新建routes/upload.js四、修改routes下的index.js五、修改index.js六、新建上传文件test.html七、开启jwt验证token&#xff0c;通过login接…...

编程日记 2024/3/2 15:00:20

markdown的使用(Typora)

文章目录 markdown的使用(Typora)一.标题二.段落格式2.1 换行2.2 分割线2.3 字体2.4 上下标2.5 脚注2.6 改变字体颜色 三.列表3.1 无序列表3.2 有序列表3.3 列表嵌套3.4 任务列表 四.区块五.代码显示5.1 行内代码5.2 代码块 六.链接七.图片八.表格九.表情符号大纲十、流程图10.…...

编程日记 2024/3/2 14:57:17

【python】json转成成yaml中文编码异常显示成：\u5317\u4EAC\u8DEF123\u53F7

姊妹篇&#xff1a;【python】json转成成yaml json数据 {"name": "张三","age": 30,"isMarried": false,"children": [{"name": "小王","age": 5},{"name": "小李",&qu…...

编程日记 2024/3/2 14:54:14

Python 实现Excel自动化办公（中）

在上一篇文章的基础上进行一些特殊的处理&#xff0c;这里的特殊处理主要是涉及到了日期格式数据的处理&#xff08;上一篇文章大家估计也看到了日期数据的处理是不对的&#xff09;以及常用的聚合数据统计处理&#xff0c;可以有效的实现你的常用统计要求。代码如下&#xff1…...

编程日记 2024/3/2 14:51:12

MCTS代码

这段代码的背景是玩一个游戏。游戏的参数有NUM_TURNS&#xff0c;在第i回合&#xff0c;你可以从一个整数[-2,2,3&#xff0c;-3]*&#xff08;NUM_TURNS1-i&#xff09;中进行选择。例如&#xff0c;在一个4回合的游戏中&#xff0c;在第1回合&#xff0c;你可以从[-8,8,12&am…...

编程日记 2024/3/2 14:45:05

Java 中notify 和 notifyAll 方法介绍

1. notify 方法 notify() 方法是 Java 中 Object 类的一个方法&#xff0c;它用来唤醒在该对象的监视器&#xff08;monitor&#xff09;上等待的单个线程。如果有多个线程都在该对象上等待&#xff0c;则会随机唤醒其中一个线程。被唤醒的线程将会尝试重新获取对象锁&#xff…...

编程日记 2024/3/2 14:44:04

Leetcode ：杨辉三角

给定一个非负整数 numRows&#xff0c;生成「杨辉三角」的前 numRows 行。 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和。 思路&#xff1a;双循环&#xff0c;一个是层数&#xff0c;一个是当前数组的生成&#xff1b;两侧为1&#xff0c;需要边界判断条件…...

编程日记 2024/3/2 14:42:02

MWC 2024丨美格智能CEO杜国彬出席中国联通创新成果发布会并发表主题演讲

2月26日&#xff0c;中国联通在MWC2024 巴塞罗那期间举办了以“算网为基&#xff0c;智领未来”为主题的创新成果发布会&#xff0c;集中展示最新的创新成果与最佳实践。 中国通信标准化协会理事长闻库、GSMA首席财务官Louise Easterbrook、中国联通副总经理梁宝俊、华为ICT销…...

编程日记 2024/3/2 14:37:59

个人建站前端篇（七）vite + vue3企业级项目模板

一、vite命令行创建项目 npm create vitelatest根据提示选择模板&#xff0c;选择vite vue3 ts即可。 二、项目连接远程仓库 git init git remote add origin https://gitee.com/niech_project/vite-vue3-template.git git pull origin master git checkout -b dev三、项目…...

编程日记 2024/3/2 14:34:56

centos7 安装 docker-compose

1、直接参考官方&#xff1a; Install Compose standalone | Docker Docs 1、安装命令 curl -SL https://github.com/docker/compose/releases/download/v2.24.6/docker-compose-linux-x86_64 -o /usr/local/bin/docker-compose 2、修改 docker-compose 执行权限 不修改执行权…...

编程日记 2024/3/2 14:32:54

剑指offer面试题28：对称的二叉树

#试题28&#xff1a;对称的二叉树 题目&#xff1a; 请设计一个函数判断一棵二叉树是否 轴对称 。 示例 1&#xff1a; 输入&#xff1a;root [6,7,7,8,9,9,8] 输出&#xff1a;true 解释&#xff1a;从图中可看出树是轴对称的。示例 2&#xff1a; 输入&#xff1a;root …...

编程日记 2024/3/2 14:28:50

JS：原型与原型链（附带图解与代码）

一、原型 写在前面&#xff1a; 任何对象都有原型。 函数也是对象&#xff0c;所以函数也有原型。 1.什么是原型 在 JavaScript 中&#xff0c;对象有一个特殊的隐藏属性 [[Prototype]]&#xff0c;它要么为 null&#xff0c;要么就是对另一个对象的引用&#xff0c;该对象…...

编程日记 2024/3/2 14:26:48

电子电器架构新趋势 —— 最佳着力点：域控制器

电子电器架构新趋势 —— 最佳着力点&#xff1a;域控制器 我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师&#xff08;Wechat&#xff1a;gongkenan2013&#xff09;。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师…...

编程日记 2024/3/2 14:24:46

C++记录

常用快捷键&#xff1a; CTRL -向后定位 CTRL SHIFT -向前定位 1.注释&#xff1a;CTRLKC 2.取消注释&#xff1a;CTRLKU 11.调试(启动)&#xff1a;F5 20.查找&#xff1a;CTRLF 21.替换&#xff1a;CTRLH 31.跳转到指定的某一行 1)方法1&#xff1a;组合键“CtrlG…...

编程日记 2024/3/2 14:23:45

ConcurrentModificationException并发修改异常

ConcurrentModificationException并发修改异常 原因分析 可以通过遍历索引也可以通过迭代器进行遍历。在我们使用迭代器进行遍历集合的时候&#xff0c;会获取到当前集合的迭代对象。在里面有封装了迭代器的remove方法与集合自带的remove方法&#xff0c;如果我们调用迭代器对…...

编程日记 2024/3/2 14:21:42

小程序事件处理

事件处理 一个应用仅仅只有界面展示是不够的&#xff0c;还需要和用户做交互&#xff0c;例如&#xff1a;响应用户的点击、获取用户输入的值等等&#xff0c;在小程序里边&#xff0c;我们就通过编写 JS 脚本文件来处理用户的操作 1. 事件绑定和事件对象 小程序中绑定事件与…...

编程日记 2024/3/2 14:13:33

蓝桥杯-单片机组基础6——定时计数器与外部中断混合使用（附小蜜蜂课程代码）

蓝桥杯单片机组备赛指南请查看这篇文章&#xff1a;戳此跳转蓝桥杯备赛指南文章 本文章针对蓝桥杯-单片机组比赛开发板所写&#xff0c;代码可直接在比赛开发板上使用。 型号&#xff1a;国信天长4T开发板&#xff08;绿板&#xff09;&#xff0c;芯片&#xff1a;IAP15F2K6…...

编程日记 2024/3/2 14:12:32

交友社交软件开发-php交友聊天系统-

为了开发一个高效的交友系统&#xff0c;需要一个完善的信息管理和筛选机制。这个系统应该能够根据用户的个人信息、兴趣爱好、价值观等标准进行筛选&#xff0c;并向用户提供符合他们要求心仪的人的信息。为了实现这个目标&#xff0c;系统可以利用人工智能技术&#xff0c;分…...

编程日记 2024/3/2 14:11:31

vue2 开发记录

el-select 如何修改选择项的样式/el-select-dropdown__item 文字上下显示 测试代码 <div stylemargin-left: 100px><!-- 测试代码--><el-select filterablesizemini><div classxxx-el-select><el-optionv-foritem in [{key:1,des:2,…...

编程日记 2024/3/2 14:10:30

QML中表格中数据获取

1.在生成的动态表格中获取某格数据的内容 import QtQuick 2.15 import QtQuick.Window 2.15import QtQuick.Controls 2.0 import Qt.labs.qmlmodels 1.0 import QtQuick.Layouts 1.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")TableMod…...

编程日记 2024/3/2 14:09:29

CH7034B显示模块原理图设计，已量产

目录 1、系统整体架构设计 2、核心子系统电路设计 2.1、CH7034B 主桥接芯片与 RGB 输入组织 2.2、模拟显示输出与 DDC 边界 2.3、1.8V 核心电源、27MHz 时钟与辅助控制器 2.4、背光与边角控制电路 3、硬件性能优化与工程化考量 3.1、电源与噪声控制 3.2、信号完整性与…...

编程新知 2026/4/13 5:11:55

用 Microsoft Agent Framework 构建 SubAgent（Multi-Agent）卤

本文能帮你解决什么&#xff1f; 1. 搞懂FastAPI异步&#xff08;async/await&#xff09;到底在什么场景下能真正提升性能。 2. 掌握在FastAPI中正确使用多线程处理CPU密集型任务的方法。 3. 避开常见的坑&#xff08;比如阻塞操作、数据库连接池耗尽、GIL限制&#xff09;…...

编程新知 2026/4/13 4:51:42

Claude顾问策略技术深度解析：Opus 4.6幕后指挥，Sonnet/Haiku高效执行

技术分析&#xff1a;Anthropic顾问策略架构设计与性能优化实现原理 前言&#xff1a;AI Agent架构的革命性突破 2026年3月&#xff0c;Anthropic正式发布Claude"顾问策略"&#xff08;Advisor Strategy&#xff09;&#xff0c;这一技术架构彻底改变了传统AI Agent…...

编程新知 2026/4/13 4:43:31

【2026年最新600套毕设项目分享】基于微信小程序的商品展示（30033）

有需要的同学&#xff0c;源代码和配套文档领取&#xff0c;加文章最下方的名片哦 一、项目演示 项目演示视频 二、资料介绍 完整源代码&#xff08;前后端源代码SQL脚本&#xff09;配套文档&#xff08;LWPPT开题报告/任务书&#xff09;远程调试控屏包运行一键启动项目&…...

编程新知 2026/4/13 4:02:58

Gerrit代码Review高效协作指南：如何利用Topic和CI加速团队开发

Gerrit代码Review高效协作指南&#xff1a;如何利用Topic和CI加速团队开发 在当今快节奏的软件开发环境中&#xff0c;高效的代码审查流程是保证产品质量和团队协作效率的关键。Gerrit作为一款开源的代码审查工具&#xff0c;凭借其强大的分支管理和变更追踪能力&#xff0c;已…...

编程新知 2026/4/13 3:52:55

OPCServer DA版本：二次开发源代码及测试软件

OPCServer DA OPC服务端opcserver发包&#xff09;好用&#xff0c;几百个应用现场 二次开发源代码&#xff0c;C#开发&#xff0c;可二次开发。 已应用到多个行业的几百个应用现场&#xff0c;长时间运行稳定&#xff0c;可靠。 本项目中提供测试OPCServer的软件开发源码&am…...

编程新知 2026/4/13 2:51:12

使用OpenClaw的Skills对接本地系统勇

1. 流图&#xff1a;数据的河流 如果把传统的堆叠面积图想象成一块块整齐堆叠的积木&#xff0c;那么流图就像一条蜿蜒流淌的河流&#xff0c;河道的宽窄变化自然流畅&#xff0c;波峰波谷过渡平滑。 它特别适合展示多个类别数据随时间的变化趋势&#xff0c;尤其是当你想强调整…...

编程新知 2026/4/13 2:35:07

Switch_lib：面向继电器控制的轻量级数字引脚时序管理库

1. Switch_lib 库深度解析&#xff1a;面向继电器控制的数字引脚时序管理方案在工业控制、智能家居和嵌入式自动化系统中&#xff0c;对数字输出引脚进行精确、可编程的时序控制是基础而关键的需求。典型场景包括&#xff1a;继电器驱动&#xff08;如水泵启停、照明定时、加热…...

编程新知 2026/4/13 2:29:02

MATLAB+CPLEX仿真平台下的微网虚拟电厂日前优化调度模型：融合电动汽车出行及充放电规律...

MATLAB代码&#xff1a;含多种需求响应及电动汽车的微网/虚拟电厂日前优化调度 关键词&#xff1a;需求响应 空调负荷 电动汽车 微网优化调度 虚拟电厂调度 仿真平台&#xff1a;MATLABCPLEX 主要内容&#xff1a;代码主要做的是一个微网/虚拟电厂的日前优化调度模型&#…...

编程新知 2026/4/13 2:10:31

M5StamPLC工业PLC库：ESP32嵌入式实时控制与I²C外设驱动

1. M5StamPLC 库概述M5StamPLC 是专为 M5Stack 推出的 K141 型号工业级可编程逻辑控制器&#xff08;PLC&#xff09;开发板设计的底层驱动库。该板卡并非传统意义上的 Arduino 兼容开发板&#xff0c;而是面向工业自动化场景的嵌入式控制终端&#xff0c;具备数字量输入/输出、…...

编程新知 2026/4/13 2:02:18