当前位置：首页 > 建站学院 > 其他教程 > node怎么使用multer进行文件的上传与下载

node怎么使用multer进行文件的上传与下载

其他教程发布日期：2025年03月17日浏览次数：195次

这篇“node怎么使用multer进行文件的上传与下载”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“node怎么使用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')
})

以上就是node怎么使用multer进行文件的上传与下载的详细内容，更多关于node怎么使用multer进行文件的上传与下载的资料请关注九品源码其它相关文章！

相关热词： node 使用 multer 进行文件上传下载

上一篇：讲一讲如何在一个页面中使用多个百度分享按钮，分享不同的文章
下一篇：Go语言与阿里云接口对接的性能优化技巧

文章分类

IT资讯 CMS教程服务器数据库前端开发后端开发工具使用其他教程

开发前端软件素材源码教程下载网站

node怎么使用multer进行文件的上传与下载

文章分类

最后更新

热门排行