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

最新推荐文章于 2024-08-23 14:44:11 发布

小帅的编程笔记

最新推荐文章于 2024-08-23 14:44:11 发布

阅读量2.2k

点赞数 2

分类专栏：小帅的编程笔记文章标签： node.js javascript

本文链接：https://blog.csdn.net/cmdfas/article/details/120179276

版权

小帅的编程笔记专栏收录该内容

117 篇文章 4 订阅

订阅专栏

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

今天我们来搞一个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.测试上传文件

通过浏览器进行测试

kapture-2021-09-07at22.19.45

通过Postman测试

kapture-2021-09-07at22.23.19

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

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

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

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

小帅的编程笔记

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录