multer
首先了解下浏览器的自动下载：
使用Express静态资源中间件的默认行为是在浏览器中展示静态文件，而不是自动下载。
如果需要访问静态资源时自动下载，可以在HTTP响应中设置Content-Disposition头。Content-Disposition头指示浏览器以何种方式处理要下载的文件。
常见的Content-Disposition值有"inline"和"attachment"。当Content-Disposition的值为"attachment"时，浏览器会自动下载文件，示例代码如下：
app.use('/uploads', express.static(__dirname + '/uploads', {
setHeaders: (res, path) => {
res.setHeader('Content-Disposition', 'attachment');
}
}));
再来了解下multer：
Multer是一个Node.js中间件，用于处理表单数据中的multipart/form-data类型。主要用于上传文件，将上传的文件保存到指定的目录中。
Multer还提供了多个方法，这些方法可以根据不同的需求设置文件上传的行为。比如：single()方法用于上传单个文件，none()方法表示不接受任何文件，fields()方法用于上传多个字段的文件，limits属性用于限制上传文件的大小等
接下来开始准备：
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传</title>
</head>
<body>
<input type="file" id="fileInput">
<br><br>
<button onclick="upload()">上传</button>
<script>
function upload() {
const formData = new FormData()
formData.append('image', document.getElementById('fileInput').files[0])
fetch('http://127.0.0.1:3000/upload', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(result => {
console.log(result)
})
}
</script>
</body>
</html>
//app.js
const express = require('express')
const app = express()
// 创建上传路由
app.post('/upload', (req, res) => {
res.send('hello world')
})
// 启动服务器
app.listen(3000, () => {
console.log('Server running on http://localhost:3000')
})
安装Multer，npm i Multer，根目录新建一个uploads文件夹 然后对app.js进行配置：就实现了文件上传
const express = require('express')
const multer = require('multer')
const path = require('path')
const app = express()
// diskStorage创建上传存储器
const storage = multer.diskStorage({
// 设置上传文件存储目录
destination: function (req, file, cb) {
cb(null, './uploads/')
},
//保存在 uploads 中的文件名
filename: function (req, file, cb) {
const extname = path.extname(file.originalname) // 获取文件后缀名
const filename = Date.now() + '-' + extname // 时间戳+后缀名 生成唯一文件名
cb(null, filename)
}
})
//创建一个名为upload的文件上传示例
const upload = multer({ storage: storage })
// 创建上传路由
// upload.single('image') 处理单个文件上传
app.post('/upload', upload.single('image'), (req, res) => {
const file = req.file
if (!file) {
return res.status(400).send('请选择要上传的图片')
}
res.send('上传成功')
})
// 启动服务器
app.listen(3000, () => {
console.log('Server running on http://localhost:3000')
})
然后实现文件下载，也是对app.js进行配置：url+uploads+上传的文件就可以实现下载
const express = require('express')
const multer = require('multer')
const path = require('path')
const app = express()
XXXXXXXXXXXXXXX 跟上面一样的
app.use('/uploads', express.static(__dirname + '/uploads', {
setHeaders: (res, path) => {
// 当Content-Disposition的值为"attachment"时，浏览器会自动下载文件
res.setHeader('Content-Disposition', 'attachment');
}
}));
// 启动服务器
app.listen(3000, () => {
console.log('Server running on http://localhost:3000')
})
图片验证码
svg-captcha简介
所用模块：svg-captcha，svg-captcha 是一个基于 Node.js 平台的验证码生成库，它可以生成 SVG 格式的验证码，支持自定义验证码长度、字符集等选项，主要用于网站、移动应用等需要用户验证的场景。
- svg-captcha的常见配置属性：
- size: 验证码图片的尺寸，默认为 4。
- ignoreChars: 不包括的字符，可以是字符串或字符数组，默认为空。
- noise: 干扰线条的数量，默认为 1。
- color: 验证码图片的颜色，默认为黑色，可以是 CSS 颜色值或 RGB 数组。
- background: 验证码图片的背景色，默认为白色，可以是 CSS 颜色值或 RGB 数组。
- width: 验证码图片的宽度，默认为 150 像素。
- height: 验证码图片的高度， 默认为 50 像素。
- fontSize: 验证码字体的大小，默认为 50。
开始编码
开始前期工作准备，安装express，新建app.js，初始化如下代码：
const express = require('express');
const app = express();
app.get('/ac', (req,res) => {
res.send("hello world")
})
app.listen(8080, () => {
console.log('Server listening on port 8080');
});
- 安装：
npm i svg-captcha -S - 创建js文件 进行配置：
// qrcode.js
const code = require("svg-captcha");
let qrcode = () => {
return code.create({
size: 3, // 字符数
ignoreChars: "zxcvbnmasdfghjklqwertyuiop", // 过滤字符
noise: 3, // 干扰线条数
color: true,
background: "#fff", // 背景颜色
});
}
module.exports = qrcode;
- 在app.js文件中引入 并使用：
const express = require('express');
const app = express();
const captcha = require("./qrcode")
app.get('/ac', (req,res) => {
let code = captcha()
console.log(code.text) //QLD
res.send(code.data)
})
app.listen(8080, () => {
console.log('Server listening on port 8080');
});
- 运行app.js，连接请求：
编辑