功能需求:
允许用户上传图片,服务端从请求中读取并且保存在服务器中
允许用户下载图片
允许用户上传excel文件,服务端从请求中读取并且解析内容
核心第三方库
express: 基于node使用最为广泛的框架
multer: 用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件
xlsx: 用于各类excel表格处理
项目环境
1、搭建基础项目(前提需要安装好8.0以上的node环境)
mkdir node-uploadfile
cd node-uploadfile
touch index.js
npm init # 此后全部回车
2、安装依赖
npm i express multer xlsx cors body-parser --save
代码实现(index.js)
1、引入项目依赖模块
const fs = require('fs')
const app = require('express')()
const cors = require('cors')
const bodyParser = require('body-parser')
const xlsx = require('xlsx')
const multer = require('multer')
const upload = multer({ storage: multer.memoryStorage() }) // 上传文件使用缓存策略
app.use(cors()) // 允许跨域
app.use(bodyParser.json()) // 解析json数据
app.use(bodyParser.urlencoded({ extended: true }))
2、上传图片并保存到服务器(上传多个)
// 上传图片
app.route("/upload_image")
.post(upload.any(), async (req, res) => {
const files = req.files || []
let success = 0 // 成功上传数量
const promises = files.map(async (file) => {
try {
const filePath = `${__dirname}/${file.originalname}`
// 判断文件是否存在, 若存在先删除原有文件,再写入新文件
const is_have = await fs.existsSync(filePath)
if (is_have) {
await fs.unlinkSync(filePath)
}
await fs.writeFileSync(filePath, file.buffer)
success ++ // 成功次数+1
} catch (err) {
console.error(err)
}
})
// 异步存储图片
await Promise.all(promises)
return res.json({ text: `已成功上传${success}个文件` })
})
部分代码说明:
upload.any():路由中间件方法,主要目的为解析http中传输的文件,我们之所以不放在全局的接口中,是因为我们这样可以限定只有该接口才会解析用户上传的文件,避免其他接口受到异常攻击
req.files:使用了multer插件后,解析的文件数据会保存在其中,注意:它是一个数组,证明其中可包含多个文件数据
Promise.all: 异步并发多个方法,提高图片存储在服务器中的效率
3、下载图片
app.route("/download_image")
.post(async (req, res) => {
res.download(`${__dirname}/vampire.jpg`);
})
代码说明:
下载的代码很简单,只需要使用express封装好的res.download方法,后面是图片的绝对路径。
注意:示例中的图片路径还以大家根据项目内的文件路径来填写
4、上传excel并解析内容
// 上传excel
app.route("/upload_excel")
.post(upload.any(), (req, res) => {
if (!req.files || req.files.length === 0) {
return res.json({ text: '请选择文件上传' })
}
const { originalname, buffer } = req.files[0]
if (!originalname.endsWith('xls') && !originalname.endsWith('xlsx')) {
return res.json({ text: '请上传xls或xlsx格式的文件' })
}
// 解析excel文件
const workbook = xlsx.read(buffer, { type: "buffer" })
const sheet = workbook.Sheets[workbook.SheetNames[0]] // 选择第一个工作簿
const result = xlsx.utils.sheet_to_json(sheet)
return res.json(result)
})
部分代码说明:
upload.any() 和 req.files: 和上面上传图片一样的
xlsx.read(): 文件数据,以及文件数据的类型, 这里我们使用的buffer流
workbook.SheetNames: 选择工作薄,什么意思呢?如下如画圈圈的地方
5、进程监听端口
app.listen(3000, () => {
console.log("node-uploadfile server is start!")
})
最后可别忘了这一步,这一步才是最重要的呢!!!
6、api调试
最后要怎么调试呢?这里推荐使用安装postman这个软件
这个工具可以很方便我们调试api,使用起来也很方便。当然,你也可以自己编写简单的html页面来使用调试api,最重要就是你喜欢咯~
好了!赶紧动起来!!!
附上本人简单的demo: node-uploadfile 运行demo的方式在项目的README.md中