关于node使用multer进行文件的上传与下载

 更新时间:2023年04月19日 10:51:41   作者:阿晨学前端  
这篇文章主要介绍了关于node使用multer进行文件的上传与下载,Multer是一个Node.js中间件,用于处理表单数据中的multipart/form-data类型,需要的朋友可以参考下

首先了解下浏览器的自动下载:

使用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.js打包管理工具NPM用法

    Node.js打包管理工具NPM用法

    这篇文章介绍了Node.js打包管理工具NPM的用法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • Node.js使用Express创建Web项目详细教程

    Node.js使用Express创建Web项目详细教程

    如果需要入门使用node.js进行web开发,正在学习 nodejs web开发指南 的和想快速了解node.js web开发模式的朋友,相信本文是有一定帮助意义的。
    2017-03-03
  • nodejs中操作mysql数据库示例

    nodejs中操作mysql数据库示例

    这篇文章主要介绍了nodejs中操作mysql数据库示例,本文演示了如何在NodeJS中创建创建mysql连接、mysql数据库、插入数据、查询数据等功能,需要的朋友可以参考下
    2014-12-12
  • 详解nodejs微信公众号开发——2.自动回复

    详解nodejs微信公众号开发——2.自动回复

    这篇文章主要介绍了详解nodejs微信公众号开发——2.自动回复,非常具有实用价值,需要的朋友可以参考下
    2017-04-04
  • 一步步教你使用node搭建一个小页面

    一步步教你使用node搭建一个小页面

    最近使用NodeJs搭建的小型web应用,所以下面这篇文章主要给大家介绍了关于使用node搭建一个小页面的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • 用Nodejs搭建服务器访问html、css、JS等静态资源文件

    用Nodejs搭建服务器访问html、css、JS等静态资源文件

    本篇文章主要介绍了用Nodejs搭建服务器访问html、css、JS等静态资源文件的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧
    2017-04-04
  • Node中的util.promisify()方法的基本使用和实现

    Node中的util.promisify()方法的基本使用和实现

    众所周知,在JS中实现异步编程主要是通过以下几种方案,回调函数,观察者模式,Generator,Promise,async / await ,今天就和大家一起聊一下在node中的一个util.promisify()这个API的基本使用和基本实现
    2023-07-07
  • 带你了解NodeJS事件循环

    带你了解NodeJS事件循环

    这篇文章主要介绍NodeJS事件循环,Node中代码从上到下同步执行,在执行过程中会将不同的任务添加到相应的队列中,那具体有的循环又是怎么回事呢,限免现编就带大家学习该详细内容,需要的朋友也可以参考一下
    2022-02-02
  • node.js express捕获全局异常的三种方法实例分析

    node.js express捕获全局异常的三种方法实例分析

    这篇文章主要介绍了node.js express捕获全局异常的三种方法,结合实例形式简单分析了node.js express捕获全局异常的常见操作方法与使用注意事项,需要的朋友可以参考下
    2019-12-12
  • nodejs教程之制作一个简单的文章发布系统

    nodejs教程之制作一个简单的文章发布系统

    本文主要讲述了使用nodejs制作一个简单的文章发布系统,使用mongodb数据库,时间比较紧,功能做的也比较简单,仅仅是增删改查,外加附近上传,有相同需求的小伙伴可以参考下
    2014-11-11

最新评论