node.js——uploads上传文件（multer）

最新推荐文章于 2023-05-28 22:30:06 发布

K.P

最新推荐文章于 2023-05-28 22:30:06 发布

阅读量1.3k

点赞数

本文链接：https://blog.csdn.net/weixin_44314609/article/details/109398821

版权

npm 同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

nodejs

7 篇文章 0 订阅

订阅专栏

此文为实现一个以nodejs为基础，简单的图片上传功能的小demo，做记录，供参考！

安装

安装四个插件express multer ejs path

npm install express multer ejs path

构建启动服务器

// 引入模块
const express = require('express')
const multer = require('multer')
const ejs = require('ejs')
const path = require('path')

// 初始化app
const app = express()

// 引用ejs 模板
app.set('view engine', 'ejs')
// 配置静态资源 public文件夹中
app.use(express.static('./public'))

// 请求接口
app.get('/', (req, res) => {
	//渲染到 index.ejs
    res.render('index')
})

// 监听 3000端口
app.listen(3000)

新建views 文件夹，创建index.ejs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <title>图片上传</title>
</head>
<body>
    <div class="container">
        <h1>上传图片文件</h1>
        <!-- 请求接口 /upload -->
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <div >
              <div class="btn grey">
                <span>选择图片</span>
                <input type="file" name="myImage">
              </div>
              <div class="file-path-wrapper">
                <input type="text">
              </div>
            </div>
            <button type="submit">确认提交</button>
          </form>
          <br>
    </div>
</body>
</html>

好啦~打开本地3000端口，查看是否能开始（我相信你，可以的）

根目录创建public，在里面新建my-uploads文件夹，用于存放上传上来的图片，下面进入正题了，可在multer中文官网查看正文。

来自multer中文官网
从上图进行修改成下面代码

// index.js
// 磁盘存储引擎
var storage = multer.diskStorage({
	// 最终的存放地址
    destination: function (req, file, cb) {
      cb(null, './public/my-uploads/')
    },
    // 文件最终的命名
    filename: function (req, file, cb) {
    	// 文件名 + ‘-’ + 时间戳 + 文件后缀名
      cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
    }
  })
  
// 初始化upload
const upload = multer({
    storage:storage,		// 配置
    fileFilter:function(req, file, cb){		// 限制文件函数
        checkFileType(file, cb);			// 判断是否满足文件类型
    },
    limits:{fileSize:1000000}				// 限制文件大小
}).single('myImage');

// 验证文件类型
function checkFileType(file, cb){
    // 允许的文件扩展名格式
    const filetypes = /jpeg|jpg|png|gif/;
    // 验证扩展名
    const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
    // 验证MIME
    const mimetype = filetypes.test(file.mimetype);

    if(mimetype && extname){
        return cb(null, true);
    }else{
        cb('错误：只支持图片格式！')
    }
}

下面再进行 /uploads 的请求

app.post('/upload', (req, res) => {
    upload(req, res, (err) => {
        if(err){
            res.render('index', {
                msg:err
            });
        }else{
            // console.log(req.file)
            // res.send('test');
            if(req.file === undefined){
                res.render('index',{
                    msg:'错误：请选择上传文件！'
                })
            }else{
                res.render('index',{
                    msg:'文件已上传成功！',
                    file:`my-uploads/${req.file.filename}`
                })
            }
        }
    })
})

为了提高用户体验，在提交错误文件或其他报错，在ejs模板添加，错误返回，并且添加若上传成功，展示图片，完成的ejs如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <title>图片上传</title>
</head>
<body>
    <div class="container">
        <h1>上传图片文件</h1>
        <%= typeof msg != 'undefined' ? msg : ''%>
        <form action="/upload" method="POST" enctype="multipart/form-data">
            <div >
              <div class="btn grey">
                <span>选择图片</span>
                <input type="file" name="myImage">
              </div>
              <div class="file-path-wrapper">
                <input type="text">
              </div>
            </div>
            <button type="submit">确认提交</button>
          </form>
          <br>

          <img src=" <%= typeof file != 'undefined' ? file : ''%>" alt="" class="responsive-img">
    </div>
</body>
</html>

完整的后端请求代码如下：

const express = require('express')
const multer = require('multer')
const ejs = require('ejs')
const path = require('path')

const app = express()

// 磁盘存储引擎
var storage = multer.diskStorage({
	// 最终的存放地址
    destination: function (req, file, cb) {
      cb(null, './public/my-uploads/')
    },
    // 文件最终的命名
    filename: function (req, file, cb) {
    	// 文件名 + ‘-’ + 时间戳 + 文件后缀名
      cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname))
    }
  })
  
// 初始化upload
const upload = multer({
    storage:storage,		// 配置
    fileFilter:function(req, file, cb){		// 限制文件函数
        checkFileType(file, cb);			// 判断是否满足文件类型
    },
    limits:{fileSize:1000000}				// 限制文件大小
}).single('myImage');


// 验证文件类型
function checkFileType(file, cb){
    // 允许的文件扩展名格式
    const filetypes = /jpeg|jpg|png|gif/;
    // 验证扩展名
    const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
    // 验证MIME
    const mimetype = filetypes.test(file.mimetype);

    if(mimetype && extname){
        return cb(null, true);
    }else{
        cb('错误：只支持图片格式！')
    }
}

app.set('view engine', 'ejs')

app.use(express.static('./public'))

app.get('/', (req, res) => {
    res.render('index')
})

app.post('/upload', (req, res) => {
    upload(req, res, (err) => {
        if(err){
            res.render('index', {
                msg:err
            });
        }else{
            // console.log(req.file)
            // res.send('test');
            if(req.file === undefined){
                res.render('index',{
                    msg:'错误：请选择上传文件！'
                })
            }else{
                res.render('index',{
                    msg:'文件已上传成功！',
                    file:`my-uploads/${req.file.filename}`
                })
            }
        }
    })
})

app.listen(3000)

样式展示

在这里插入图片描述

至此，图片上传小demo完成，仅供参考，多多学习~~

K.P

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node.js——uploads上传文件（multer）

此文为实现一个以nodejs为基础，简单的图片上传功能的小demo，做记录，供参考！安装安装四个插件express multer ejs pathnpm install express multer ejs path构建启动服务器// 引入模块const express = require('express')const multer = require('multer')const ejs = require('ejs')const path = require('path')//
复制链接

扫一扫