node.js中 express + multer 处理文件上传
multer中间件,可以很方便的结合express处理用户表单上传的文件。
一、安装multer
npm install multer
二、处理单个文件上传
const express = require('express');
const multer = require('multer');
const path = require('path'); let app = express();
app.listen(8888); app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
}); //创建一个multer对象,dest用来设置上传文件存放的目录
let upload = multer({dest: 'uploads/'});
//single()方法是用来处理单个文件上传,注意参数的名字要与表单中的name值一致
app.post('/upload', upload.single('img'), function (req, res) {
//body里面存放了表单的文本域信息
console.log(req.body);
//file存放了单个文件的信息
console.log(req.file); res.end('ok');
});
index.html的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="http://localhost:8888/upload" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="name"><br>
密码:<input type="password" name="pwd"><br>
图片:<input type="file" name="img"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
点击提交后,可以看到在upload目录下有一个文件生成了,这个文件就是我们上传的文件,不过好像扩展名没有了。
二、处理多个文件上传
处理多个文件上传,可以使用 array() 或 fields() 方法。
const express = require('express');
const multer = require('multer');
const path = require('path'); let app = express();
app.listen(8888); app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
}); let upload = multer({dest: 'uploads/'});
//array()方法用于处理多个文件上传
//参数一表示,文件上传表单name属性的值
//参数二表示,允许上传文件个数
app.post('/uploads', upload.array('imgs', 3), function (req, res) {
//files存放了多个文件的信息,是一个数组
console.log(req.files);
res.end('ok');
}); //fields()方法也可以处理多个文件,参数是一个对象数组。
//对象中用name指定文件上传表单name属性的值,maxCount指定允许上传文件个数
app.post('/objects', upload.fields([
{name: "head", maxCount: 1},
{name: "info", maxCount: 3}
]), function (req, res) {
//files是一个对象,键就是我们上面设置的name的值,值就是文件数组
console.log(req.files);
res.end('ok');
});
index.html的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<form action="http://localhost:8888/uploads" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="name"><br>
密码:<input type="password" name="pwd"><br>
图片1:<input type="file" name="imgs"><br>
图片2:<input type="file" name="imgs"><br>
图片3:<input type="file" name="imgs"><br>
<input type="submit" value="提交">
</form> <form action="http://localhost:8888/objects" method="post" enctype="multipart/form-data">
用户名:<input type="text" name="name"><br>
密码:<input type="password" name="pwd"><br>
头像:<input type="file" name="head"><br>
信息1:<input type="file" name="info"><br>
信息2:<input type="file" name="info"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
三、自定义文件存储路径和文件名
上面的代码我们通过配置 dest 来指定存放目录。不过如果上传文件过多,单一的存放在一个目录下肯定有问题,所以需要我们自定义。
还有文件上传后,都没有扩展名了,这显然也需要我们自定义。
const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs'); let app = express();
app.listen(8888); app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
}); let upload = multer({
storage: multer.diskStorage({
//设置文件存储位置
destination: function (req, file, cb) {
let date = new Date();
let year = date.getFullYear();
let month = (date.getMonth() + 1).toString().padStart(2, '0');
let day = date.getDate();
let dir = "./uploads/" + year + month + day; //判断目录是否存在,没有则创建
if (!fs.existsSync(dir)) {
fs.mkdirSync(dir, {recursive: true});
} //dir就是上传文件存放的目录
cb(null, dir);
},
//设置文件名称
filename: function (req, file, cb) {
let fileName = file.fieldname + '-' + Date.now() + path.extname(file.originalname);
//fileName就是上传文件的文件名
cb(null, fileName);
}
})
}); app.post('/uploads', upload.array('imgs', 3), function (req, res) {
console.log(req.files);
res.end('ok');
});
四、过滤上传文件
有些时候我们希望用户上传的只是图片文件,其他文件不让上传。
const express = require('express');
const multer = require('multer');
const path = require('path');
const fs = require('fs'); let app = express();
app.listen(8888); app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'index.html'));
}); let upload = multer({
//用于过滤文件的函数
fileFilter: function (req, file, cb) {
let ext = path.extname(file.originalname);
let extArr = ['.jpg', '.jpeg', '.gif', '.png'];
if (!extArr.includes(ext)) {
//拒绝这个文件
//cb(null, false);
//当然我们还可以发送一个错误
cb(new Error('扩展名不正确'));
} //接受这个文件
cb(null, true);
}
}); app.post('/uploads', upload.array('imgs', 3), function (req, res) {
console.log(req.files);
res.end('ok');
}); //捕获错误
app.use(function (err, req, res, next) {
res.send(err.toString());
});
node.js中 express + multer 处理文件上传的更多相关文章
- node.js使用express框架进行文件上传
关于node.js使用express框架进行文件上传,主要来自于最近对Settings-Sync插件做的研究.目前的研究算是取得的比较好的进展.Settings-Sync中通过快捷键上传文件,其实主要 ...
- 使用Node.js的Express框架进行文件上传
我们先创建一个Express项目,要使用文件上传的功能还需要下载multer模块. npm install --save multer 下面我们在public文件夹下创建upload.html,内容如 ...
- Nodejs进阶:基于express+multer的文件上传
关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...
- Node.js新手教程——怎样实现文件上传功能
作者:zhanhailiang 日期:2014-11-16 本文将介绍怎样使用Node.js实现文件上传功能. 1. 初始化项目信息:npm init [root@~/wade/nodejs/node ...
- node.js中express模块创建服务器和http模块客户端发请求
首先下载express模块,命令行输入 npm install express 1.node.js中express模块创建服务端 在js代码同文件位置新建一个文件夹(www_root),里面存放网页文 ...
- 在 Node.js 中处理大 JSON 文件
在 Node.js 中处理大 JSON 文件 场景描述 问题一: 假设现在有一个场景,有一个大的 JSON 文件,需要读取每一条数据经过处理之后输出到一个文件或生成报表数据,怎么能够流式的每次读取一条 ...
- Bootstrap fileinput.js,最好用的文件上传组件
本篇介绍如何使用bootstrap fileinput.js(最好用的文件上传组件)来进行图片的展示,上传,包括springMVC后端文件保存. 一.demo 二.插件引入 <link ty ...
- zt对于C#中的FileUpload解决文件上传大小限制的问题设置
对于C#中的FileUpload解决文件上传大小限制的问题设置 您可能没意识到,但对于可以使用该技术上载的文件的大小存在限制.默认情况下,使用 FileUpload 控件上载到服务器的文件最大为 4M ...
- 分享知识-快乐自己:SpringMvc中的单多文件上传及文件下载
摘要:SpringMvc中的单多文件上传及文件下载:(以下是核心代码(拿过去直接能用)不谢) <!--设置文件上传需要的jar--> <dependency> <grou ...
随机推荐
- eclipse中mybatis自动生成插件使用
对于使用Mybatis的开发者来说, 使用mybatis generator来生成mapper 以及配置文件, 可以大大简化工作, mybatis generator有多种工作方式, eclipse插 ...
- Ajax(Asynchronous JavaScript )and xml
JavaScript的两种任务执行模式--同步(synchronous)和异步(Asynchronous) 同步模式 JavaScript的执行环境是单线程的,意味着一次只能执行一个任务,如果有多个任 ...
- Written a lua threadpool
工作原理 由于lua只能单线程运行,该lib要求所有lua代码在单线程,而多线程部分只能为c代码 具体用法上要求多线程部分必须用c实现 相关模块 线程池 异步函数实现框架 Now only a sle ...
- 在宿主机查看docker使用cpu、内存、网络、io情况
命令: docker stats [OPTIONS] [CONTAINER...] 显示所有: docker stats -a
- USB3.0及NVME SSD安装WIN7X64
USB3.0及NVME SSD安装WIN7X64https://tieba.baidu.com/p/4822034273?pn=1所有的人都是菜鸟过来的,不过有些人懂得自己动手找到答案:有些人则是懒得 ...
- 廖雪峰Java6 IO编程-3Reader和Writer-2Writer
1.java.io.Writer和java.io.OutputStream的区别 OutputStream Writer 字节流,以byte为单位 字符流,以char为单位 写入字节(0-255):v ...
- SELINUX工作原理
SELinux工作原理 1. 简介 SELinux带给Linux的主要价值是:提供了一个灵活的,可配置的MAC机制. Security-Enhanced Linux (SELinux)由以下两部分组成 ...
- CIF 搜索逻辑
test code #include <cstddef> class CIF { }; template <typename OBJ> class CList { public ...
- Vue 封装的noData组件
<template> <div :style="{color: fontColor}" :class="['noDataView', iconType] ...
- 性能测试day07_性能瓶颈和分析
其实如果之前都做的很到位的话,那么再加上APM工具(dynaTrace等),监控到非常细节,那么我们跑一个业务,我们就能完全清楚的知道每个请求的时间,也能知道请求所产生sql的时间,这样你自然而然都知 ...