使用Node.js express 开发上传文件/图片api接口

我是傲夫靠斯，欢迎关注我的公众号【前端工程师的自我修养】，每天更新。

今天我们来搞一个Node.js Express的上传文件功能，我使用了busboy这个库。

Busboy是一个基于事件的文件流解析器，不仅限于Express框架使用，其他的任何文件流都能使用。它不存储文件，而是直接将文件写入到你提供的写入流。

使用Busboy可以让我们的上传更加简单，接下来我们一步步搞起来。

Node.js express 上传文件/图片步骤

1.创建express应用项目

2.安装express、busboy依赖

3.写一个上传文件表单

4.创建文件接收处理服务

5.启动服务

6.测试服务是否正常工作

1.创建Express应用

执行下面命令来创建项目文件夹，初始化Node.js项目

mkdir express-upload-file
cd express-upload-file
npm init -y

2.安装Express、Busboy依赖

在命令行执行下面命令安装express和busboy依赖

npm install express
npm install busboy

3.创建上传文件表单

创建一个带有上传文件的input和一个submit按钮

// 用于上传文件表单
app.get('/', (req, res) => {res.send(`<!DOCTYPE html><html><body><form action="upload" method="post" enctype="multipart/form-data"><h1>选择上传的文件</h1>  <input type="file" name="file"><input type="submit" value="上传"></form></body></html>`)
})

确保form具有enctype="multipart/form-data"属性，并且为post请求，否则表单不能上传文件。很多刚刚接触前端的初学者很容易遇到这种坑。

4.创建server.js文件，处理接收文件

创建server.js文件，创建uploads文件夹用于存储上传的文件，引入express、busboy依赖，处理文件接收

const express = require('express')
const Busboy = require('busboy')
const path = require('path')
const fs = require('fs')var app = express();// 用于上传文件表单
app.get('/', (req, res) => {res.send(`<!DOCTYPE html><html><body><form action="upload" method="post" enctype="multipart/form-data"><h1>选择上传的文件</h1>  <input type="file" name="file"><input type="submit" value="上传"></form></body></html>`)
})// 处理上传文件服务
app.post('/upload', (req, res) => {const busboy = new Busboy({ headers: req.headers });busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {const saveTo = path.join(__dirname, 'uploads', filename);file.pipe(fs.createWriteStream(saveTo));});busboy.on('finish', function () {res.send("文件上传成功");});return req.pipe(busboy);
});app.listen(3000, function () {console.log('服务启动成功：http://localhost:3000');
});

5.启动服务

修改package.json文件，增加start命令

{"name": "express-upload-file","version": "1.0.0","description": "","main": "index.js","scripts": {"start": "node server"},"keywords": [],"author": "","license": "ISC","dependencies": {"busboy": "^0.3.1","express": "^4.17.1"}
}

运行下面命令，启动文件上传服务

npm start
# 服务启动成功：http://localhost:3000

6.测试上传文件

通过浏览器进行测试

通过Postman测试

可以看到无论通过哪种方式进行上传都会存储到uploads文件夹下。

到这我们的功能就算完成了。欢迎有什么问题留言私信。

源码：https://github.com/cmdfas/express-upload-file

更多干货内容，欢迎关注我的公众号【前端工程师的自我修养】，每天更新。