multer使用
使用multer
1、 在项目中下载multer操作模块
Npm install multer --save
前端代码:
<form class="layui-form" action="/add" method="POST" enctype="multipart/form-data">
注意只要是上传文件请设置form enctype属性为:multipart/form-data
设置完即可
服务器代码
1、 引入multer模块
Var multer = require(“multer”);
2、 引入fs模块用于更改上传文件的名称
3、 设置上传文件保存路径
//配置上传文件的保存路径 放到public下upload目录中方便前端代码访问 upload文件如果不存在会自动创建
var upload = multer({ dest: 'public/upload/' });
单文件上传:
使用single(filename)
Router.post(“/router”,upload.single(filename),function(req,res,next){
Res.send(“上传成功”)
})
多文件上传:
前端修改:
<input type="file" id="L_repass" multiple name="img" autocomplete="off" class="layui-input">
添加属性 multiple为选择多个文件
后端代码使用循环上传文件
把upload.single改为upload.array(“imgs”,5)
Imgs:file name属性值
设置只选择图片accept="image/png,image/gif,image/jpg,image/jpeg"
5:为上传文件个数限制最大5
把req.file 改为files
注意:这个时候上传的文件没有后缀名需要自己编写代码处理
处理后缀名:使用fs模块中的
//得到文件信息
var file = req.file;
console.log(file);
//修改文件名称
fs.renameSync(file.path,"public/upload/"+file.originalname);
res.send("上传成功");
处理文件随机名称可以使用时间戳与随机数进行处理
router.post('/add',upload.single('img'), (req, res) => {
//得到文件信息
var file = req.file;
console.log(file);
var filename = "public/upload/";
if(file.mimetype == "image/jpeg"){
filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".jpg";
}else if(file.mimetype == "image/png"){
filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".png";
}else{
res.send("上传文件格式不支持请上传png与jpg图片");
}
fs.renameSync(file.path,filename);
res.send("上传成功");
});
最后把图片路径信息与其他信息保存到数据库中
//files为提交过来的表单中file组件的name属性值
router.post('/add',upload.single('img'), (req, res) => {
//得到文件信息
var file = req.file;
var filename = "upload/";
if(file.mimetype == "image/jpeg"){
filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".jpg";
}else if(file.mimetype == "image/png"){
filename+=new Date().getTime()+(Math.round(Math.random()*10000))+".png";
}else{
res.send("上传文件格式不支持请上传png与jpg图片");
}
fs.renameSync(file.path,"public/"+filename);
var sql = `INSERT INTO stuinfo (stuname, stuicon, stusex, stuage, stutel,stuaddress) VALUES ('${req.body.username}', '${filename}', '${req.body.sex}', '${req.body.age}', '${req.body.tel}', '${req.body.address}')`;
mdb(sql,function(err,result){
res.send("添加信息成功")
})
});
Ajax 上传图片
1、
手动初始化formData对象
2、
把你要上传的数据append进fromData对象中
3、 // 得到选中上传的文件对象
4、 let file=$("#imgajax")[0].files[0];
5、 //实例化formdata对象
6、 let formdata=new FormData();
7、 // 把要上传的图片对象添加到formdata里面去
formdata.append("img",file)
append(“key”,value)
key:类似于 表单中文本域中name的属性值
value:数据
$("#img")[0].files[0]类似于document.getElementById(“img”).files[0]
在ajax中添加两个属性
contentType: false,内容类型设置为false
processData:
false,数据编码设置为false类似于enctype="multipart/form-data"
// 得到选中上传的文件对象
let file=$("#imgajax")[0].files[0];
//实例化formdata对象
let formdata=new FormData();
// 把要上传的图片对象添加到formdata里面去
formdata.append("img",file)
// ajax上传
$.ajax({
type: "POST", //默认get
url: "/uploadImg/addimg", //默认当前页
data: formdata, //格式{key:value}
contentType:false,
processData:false,
dataType: "json",
beforeSend: function () {}, //请求发送前回调,常用验证
success: function (response) { //请求成功回调
alert("上传成功")
},
error: function (e) { //请求超时回调
if(e.statusText == "timeout"){
alert("请求超时");
}
},
complete: function () {}, //无论请求是成功还是失败都会执行的回调,常用全局成员的释放,或者页面状态的重置
});
Ajax多张上传
把选择的多个文件对象循环添加到formdata对象中去
let files=$("#imgajaxs")[0].files;
let formdata=new FormData();
for (const file of files) {
formdata.append("imgs",file)
}
multer使用的更多相关文章
- Nodejs进阶:基于express+multer的文件上传
关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...
- node应用通过multer模块实现文件上传
multer用于处理文件上传的nodejs中间件,主要跟express框架搭配使用,只支持表单MIME编码为multipart/form-data类型的数据请求. 如果要处理其他编码的表单数据可以通过 ...
- express4.0之后不会解析req.files,必须加一个插件multer
express 4 + 用multer express4.0之后不会解析req.files,必须加一个插件multer http://www.w3school.com.cn/tags/att_form ...
- 使用multer搭建一个图片接收服务器
为了测试图片上传插件的上传功能是否好用,最近尝试搭建了一个接收图片的服务器,因为图片上传的编码格式是form-data,所以我选择使用express+multer,实现过程中发现有几个需要注意的地方, ...
- 使用express+multer实现node中的图片上传
使用express+multer实现node中的图片上传 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在n ...
- node环境使用multer搭建一个图片接收服务器
为了测试图片上传插件的上传功能是否好用,最近尝试搭建了一个接收图片的服务器,因为图片上传的编码格式是form-data,所以我选择使用express+multer,实现过程中发现有几个需要注意的地方, ...
- nodejs-使用multer实现多张图片上传,express搭建脚手架
nodejs-使用multer实现多张图片上传,express搭建脚手架 在工作中,我们经常会看到用户有多张图片上传,并且预览展示的需求.那么在具体实现中又该怎么做呢? 本实例需要nodejs基础,本 ...
- NodeJs 使用 multer 实现文件上传
Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件 注意: Multer 不会处理任何非 multipart/form- ...
- 【nodejs】--express的中间件multer实现图片文件上传--【XUEBIG】
Multer是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件.该中间件不处理multipart/form-data数据格式以外的任何形式的数据 Tips ...
- node.js中 express + multer 处理文件上传
multer中间件,可以很方便的结合express处理用户表单上传的文件. 一.安装multer npm install multer 二.处理单个文件上传 const express = requi ...
随机推荐
- Go 代码审查建议
https://github.com/golang/go/wiki/CodeReviewComments https://studygolang.com/articles/6054
- smarty里通过循环section嵌套结合IF语句实现工程进度显示
<ul class="site_ul"> <{section name=constructionlist loop=$ly}> <li class=& ...
- 清理mac缓存
1. 查看当前目录文件大小 du -sh * 2. 查看当前目录文件大小在前十的文件 du -s * | sort -nr | head 3. 删除所有系统日志文件(有风险) sudo rm -rf ...
- django ORM中的复选MultiSelectField的使用
下载和介绍: https://pypi.org/project/django-multiselectfield/ 在django ORM的使用中,经常会出现选择的情况,例如: class person ...
- golang web框架设计5:配置设计
配置信息的解析,实现的是一个key=value,键值对的一个配置文件,类似于ini的配置格式,然后解析这个文件,把解析的数据保存到map中,最后调用的时候通过几个string,int之类的函数返回相应 ...
- Mac下Unity使用Jenkins自动化打包
重要的事情说三遍:不要使用jenkins dmg安装包直接安装,用brew安装 PS:会有权限问题 重要的事情说三遍:不要使用jenkins dmg安装包直接安装,用brew安装 重要的事情说三遍: ...
- centos(linux)-jdk配置
1.清理系统默认自带的jdk 在安装centos时,可能系统会默认安装了例如openjdk等,需要先手动卸载 先执行:rpm -qa | grep jdk (查看已经自带的jdk): 卸载命名:sud ...
- 解决zabbix中文乱码问题
进入Windows系统控制面板-->外观和个性化-->字体(选择一个字体文件simsun.ttc复制)进入zabbix的web服务器[root@test-zabbix]# cd ~/zab ...
- - RabbitMQ - 0 - 介绍、linux 和windows安装
目录 一. 介绍 二.windows安装erlang和rabbitMQ 三.Linux安装erlang和RabbitMQ 一. 介绍 rabbitMQ 是基于 erlang 语言开发的, 为了使用 r ...
- 复合模式MVC
这里也只说一下简单的原理. Model:模型实现处理数据的切逻辑. View:视图呈现模型的数据和状态. Control:解读视图对模型的操作. 视图和模型之间使用观察者模式,只要模型的状态改变视图立 ...