nodejs图片上传

最新推荐文章于 2024-06-07 09:18:52 发布

尽欢_han

最新推荐文章于 2024-06-07 09:18:52 发布

阅读量31

点赞数

文章标签： javascript node.js

本文链接：https://blog.csdn.net/weixin_71972062/article/details/135046652

版权

在实际的生产中我们经常需要上传头像等文件的操作，我们可以选择使用 multer 这个中间件来解决这个问题，下面用上传头像的常见业务来解释 multer 中间件的用法。

步骤 1：初始化项目

在命令行中进入项目文件夹，运行以下命令来初始化项目并生成 package.json 文件：

npm init -y

步骤 2：安装所需的包

我们需要安装 Express 和 Multer 这两个依赖包包，我们的功能主要通过这两个依赖包实现

npm install express multer

步骤3：创建服务

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
// 创建 app 实例
const app = express()
// 开启跨域支持
app.use(cors())
// 解析表单
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
// * 简单测试接口，后面会删掉
app.get('/', (req, res) => {
res.send('ok')
})
// 开启监听服务
app.listen('3001', () => {
console.log('express serve running at http://localhost:3001');
})

步骤 4：创建上传页面

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件上传</title>
</head>
<body>
  <h1>文件上传</h1>
  <form action="http://localhost:3000/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="image">
    <button type="submit">上传</button>
  </form>
</body>
</html>

步骤5：multer上传逻辑

// 图片上传
// 1、直接把图片文件的二进制保存到数据库中，但此种方式太占用数据库空间了，极大地影响了性能，所以目前没有用这种方式
// 2、把图片文件上传到服务器的某个目录中（文件服务器），然后接口把该文件在目录中的位置（下载地址url）返回给前端。目前均采用该种方式实现
// 文件上传使用的post请求
const express = require('express')
const multer = require('multer')

// 处理上传逻辑
const multerConfig = multer({
    // 存放地址
    storage: multer.diskStorage({
        // destination存放地址
        destination: 'public', // 上传文件存放的目录
        // 文件名做拼接
        filename(req, file, cb) { // 上传文件的文件名。注意：上传文件必须要重命名，为了放置服务器上的文件被恶意覆盖
            const fileFormat = file.originalname.split('.')
            // 自定义图片名称
            cb(null, Date.now() + '.' + fileFormat[fileFormat.length - 1])
        }
    }),
    limits: {// 限制上传文件的大小
        fileSize: 5 * 1024 * 1024
    }
})

const app = express()

// 注册post请求参数的中间件
app.use(express.json())
app.use(express.urlencoded({ extended: false }))

// 开启静态托管服务
app.use(express.static('public'))
// 调用post             将文件传入
app.post('/upload', multerConfig.single('file'), (req, res) => {
    // filename拼接后的文件名
    const filename = req.file.filename
    res.send({
        url: `http://127.0.0.1:3000/${filename}`
    })
})



app.listen(3000, () => {
    console.log('启动了')
})