NodeJS开发服务端实现文件上传下载和数据增删改查
本文主要讲解已NodeJS作为服务器完成文件的上传下载和数据增删改查，前端框架为Vue3，UI框架为element-plus，Node版本为V16.14.2.
项目场景模拟是开发一个项目管理的系统，支持任务和项目的增删改查、以及上传、下载项目附件包。
其他依赖如下
"dependencies": { "body-parser": "^1.20.2", "cors": "^2.8.5", "express": "^4.18.2", "fs": "^0.0.1-security", "http": "^0.0.1-security", "moment": "^2.29.4", "multiparty": "^4.2.3", "mysql": "^2.18.1" }
"dependencies": { "axios": "^1.3.4", "core-js": "^3.8.3", "dayjs": "^1.11.7", "element-plus": "^2.2.32", "js2uml": "^0.2.4", "mysql": "^2.18.1", "vue": "^3.2.13", "vue-router": "^4.1.6" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", "less": "^4.1.3", "less-loader": "^11.1.0" }
一、配置Node服务
首先npm i express 安装express组件作为Web服务，创建一个基础文件index.js代码如下：
const express = require('express');
const router = express();
router.listen(3000);
console.log('服务器已启动，请访问 localhost:3000');
然后cmd到当前目录，输入node index.js即可启动服务
二、前端搭建
1. 打开 cmd 窗口输入命令 npm i -g @vue/cli 安装vue脚手架
2. 输入 vue create 项目名称初始化项目
3. 输入 npm i axios 安装axios组件用于请求交互
4. 输入 npm i element-plus 安装Ele用户快速搭建UI
5. 输入 npm run serve 启动Web服务，打开浏览器访问localhost:端口号 即可验证是否搭建成功
三、Node服务搭建
1. 首先安装mysql数据库，mysql数据库为轻型数据库，所以在自己本地安装也不会太影响性能
访问 https://dev.mysql.com/downloads/mysql/ 下载数据库，按照步骤安装完成后，在配置完环境变量后即可(注：初始化时会生成一个默认的初始密码，需要记录下，否则后面登陆需要重置，比较耗时)
2. 安装navicat 客户端，按照提示步骤安装即可
3. 开发Node服务代码
①. 在index.js 中增加如下代码，为了方便大家阅读，所以一次性罗列，可以增删不同的项来学习他们的用处
②. 新建一个db.js文件，主要创建数据库连接池和提供操作数据库接口
const mysql = require('mysql');
const pool = mysql.createPool({
connectionlimit: 50, // 最大连接数
host: 'localhost',
user: 'root', // 数据库用户
password: '123456', // 数据库密码
database: 'task' // 新建的数据库名
})
/**
* 数据库查询
* @param {*} sql 查询语句
* @param {*} p 参数
* @param {*} c 回调函数
*/
function query(sql, params = [], callback) {
pool.getConnection((err, connection) => {
connection.query(sql, params, (queryErr, res) => {
connection.release();
callback.apply(null, [queryErr ? false : true, queryErr ? queryErr : res]);
})
})
}
module.exports = { query }
③. 开始开发业务相关代码， 新建border.js文件，主要处理跟项目和任务相关的逻辑
const express = require('express');
// 处理日期格式
const moment = require('moment');
// 文件上传的流解析
const multiparty = require('multiparty');
const fs = require('fs');
const db = require('./db');
function guid() {
function S4() {
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
}
return S4();
}
function creatRes(flag, data) {
let res = {};
if (flag) {
res = {
code: 1001,
data: data
}
} else {
res = {
code: 4001,
errMsg: data
}
}
return res;
}
const router = express.Router();
/**
* 获取文件列表
*/
router.get('/getTaskList', (req, res) => {
const sql = 'select t.*, p.name as productName from task t join product p where t.productId = p.productId'
db.query(sql, null, (flag, data) => {
res.send(creatRes(flag, data));
})
})
/**
* 添加任务
*/
router.post('/addTask', (req, res) => {
const param = req.body;
const id = guid();
const values = [id, param.name, param.startTime, param.progress, param.productId, param.desc, param.endTime, moment().format('YYYY-MM-DD HH:mm:ss') ];
const sql = 'INSERT INTO task VALUES(?, ?, ?, ?, ?, ?, ?, ?)';
db.query(sql, values, (flag, data) => {
res.send(creatRes(flag, data))
})
})
/**
* 删除任务
*/
router.post('/deleteTask', (req, res) => {
const param = req.body;
const sql = `DELETE FROM task where id='${param.id}'`;
db.query(sql, null, (flag, data) => {
res.send(creatRes(flag, data));
})
})
/**
* 获取项目列表
*/
router.get('/getProductList', (req, res) => {
const sql = 'select * from product';
db.query(sql,null, (flag, data) => {
res.send(creatRes(flag, data));
})
})
/**
* 添加项目
*/
router.post('/addProduct', (req, res) => {
const param = req.body;
const id = guid();
const sql = 'INSERT INTO product VALUES(?, ?, ?, ?, ?, ?, ?, ?, ?, ?)';
const sqlParam = [id, param.name, param.productId, param.startTime, param.endTime, param.progress, param.desc, moment().format('YYYY-MM-DD HH:mm:ss'), '', ''];
db.query(sql, sqlParam, (flag, data) => {
res.send(creatRes(flag, data));
})
})
/**
* 删除项目
*/
router.post('/deleteProduct', (req, res) => {
const param = req.body;
const querySql = `select packageId from product where id ='${param.id}'`;
db.query(querySql, null, (flag, data) => {
if (flag) {
fs.unlink(__dirname + '/demo/' + data[0].packageId, () => {
const sql = `DELETE t, p from product p left join task t on p.productId = t.productId where p.id= '${param.id}'`;
db.query(sql, null, (flag, data) => {
res.send(creatRes(flag, data));
})
})
}
})
})
/**
* 给项目上传附件包并将包保存到本地
*/
router.post('/upload', (req, res) => {
let form = new multiparty.Form();
// 将上传的文件流解析并保存到本地，此时文件名是随机产生的
form.uploadDir = __dirname + '/demo/';
form.parse(req, (err, fields, files) => {
const packageName = files.file[0].originalFilename;
const randomName = Math.ceil(Math.random() * 10000)+ '_' + packageName;
// 将随机产生的文件名修改为上传时的文件名
fs.rename(files.file[0].path, __dirname + '\\demo\\' + randomName, () => {
console.log('修改成功-----');
});
const sql = `update product set packageName="${packageName}",packageId="${randomName}" where id = "${fields.id[0]}"`;
db.query(sql, null, (flag, data)=> {
res.send(creatRes(flag, data));
})
})
})
/**
* 将存储的文件下载到本地
*/
router.get('/download', (req, res) => {
const sql = 'select packageId,packageName from product where id = "' + req.query.id + '"';
db.query(sql, null, (flag, result) => {
const data = result[0];
const path = __dirname + '\\demo\\' + data.packageId;
const f = fs.createReadStream(path);
const userAgent = (req.headers['user-agent']||'').toLowerCase();
const filename = data.packageName;
// 这句话不能少，不然Web端获取不到响应头参数
res.setHeader('Access-Control-Expose-Headers', 'Content-disposition');
// 不同的浏览器上传文件流时将参数写入到响应头的方式
if(userAgent.indexOf('msie') >= 0 || userAgent.indexOf('chrome') >= 0) {
res.writeHead(200, {
'Content-type': 'application/octet-stream',
'Content-disposition': 'attachment; filename=' + encodeURIComponent(filename),
});
} else if(userAgent.indexOf('firefox') >= 0) {
res.writeHead(200, {
'Content-type': 'application/octet-stream',
'Content-disposition': 'attachment; filename*="utf8\'\'' + encodeURIComponent(filename)+'"',
});
} else {
/* safari等其他非主流浏览器只能自求多福了 */
res.writeHead(200, {
'Content-type': 'application/octet-stream',
'Content-disposition': 'attachment; filename=' + new Buffer(filename).toString('binary'),
});
}
f.pipe(res);
})
})
module.exports = router;
④. 新建package.js文件，无实质内容，主要为了展示分模块路由的使用方法
const express = require('express');
const db = require('./db');
const router = express.Router();
function creatRes(flag, data) {
let res = {};
if (flag) {
res = {
code: 1001,
data: data
}
} else {
res = {
code: 4001,
errMsg: data
}
}
return res;
}
router.get('/getList', (req, res) => {
db.query('select * from package', null, (flag, data) => {
res.send(creatRes(flag, data));
})
})
module.exports = router;
四、搭建Web端
到第三步，Node服务已经开发完毕，Web端搭建默认各位老总对Web端很熟，所以大部分东西就直接上代码了
①. 首先新建axios.js文件，提供get、post、download、upload接口
import axios from "axios"; const instance = axios.create({ // Node服务地址和端口 baseURL: 'http://localhost:3000/', timeout: 30000 }) instance.interceptors.response.use(function (response) { return response; }, function (error) { return Promise.reject(error); }); function get(url, param) { return new Promise((reslove, reject) => { instance.get(url, { params: param }).then(res => { if (res.data.code === 1001) { reslove(res.data.data); } else { reject(res.data.errMsg); } }); }) } function post(url, param) { return new Promise((reslove, reject) => { instance.post(url, param).then(res => { if (res.data.code === 1001) { reslove(res.data.data); } else { reject(res.data.errMsg); } }) }) } function upload(url, param) { // 请求头配置必不可少 const config = { headers: { 'Content-type': 'multipart/form-data' } }; return new Promise((reslove, reject) => { instance.post(url, param, config).then(res => { if (res.data.code === 1001) { reslove(res.data.data); } else { reject(res.data.errMsg); } }); }) } function download(url, param) { return new Promise((reslove, reject) => { instance.get(url, { params: param, responseType: 'blob' }).then(res => { if (res.data instanceof Blob) { // 获取文件名，重新命名，否则下载后文件名会变 const fileName = decodeURIComponent(res.headers['content-disposition'].split(';')[1].split('filename=')[1]); const blob = new Blob([res.data], { type: 'application/x-zip-compressed' }); const a = document.createElement('a'); const href = window.URL.createObjectURL(blob); a.href = href; a.download = fileName; document.body.appendChild(a); a.click(); window.URL.revokeObjectURL(href); document.body.removeChild(a); reslove(fileName); } else { reject('文件下载失败'); } }); }) } export default { get, post, download, upload };
②. 新建Product.vue文件，主要包含增、删、查和上传下载文件功能
<template>
<div class="package">
<el-table :data="list" stripe style="width: 100%">
<el-table-column prop="productName" label="产品名称" />
<el-table-column prop="productId" label="产品ID" />
<el-table-column prop="packageName" label="包名" />
<el-table-column prop="createTime" label="创建时间" />
<el-table-column prop="updateTime" label="更新时间时间" />
<el-table-column fixed="right" label="操作" >
<template #default="scope">
<div class="upload-button">
<input type="file" @change="upload(scope.row, $event)"/>
<el-button link type="primary" size="small" >上传</el-button>
</div>
<el-button link type="primary" size="small" @click="download(scope.row)">下载</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script>
import { onMounted, ref } from 'vue'
import axios from '../utils/axios.js';
import { ElMessage } from 'element-plus'
export default {
name: 'PackageView',
setup() {
const list = ref([]);
function getList() {
axios.get('/package/getList').then(res => {
list.value = res;
})
}
function upload(row, e) {
const file = e.target.files[0];
if (file) {
const form = new FormData();
form.append('file', file);
form.append('id', row.id);
axios.upload('/package/upload', form).then(() => {
ElMessage({ showClose: false, message: '上传成功.', type: 'success' });
getList();
});
}
}
function download(row) {
const param = {
id: row.id
};
axios.download('/package/download', param).then(() => {
ElMessage({ showClose: false, message: '下载成功.', type: 'success' })
});
}
onMounted(() => {
getList();
})
return {
list,
upload,
download
}
}
}
</script>
<style lang="less" scoped>
.package {
.upload-button {
width: 30px;
display: inline;
position: relative;
input {
width: 30px;
opacity: 0;
z-index: 1;
position: absolute;
cursor: pointer;
}
}
}
</style>
五、效果图展示
浙公网安备 33010602011771号