使用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使用的更多相关文章

  1. Nodejs进阶:基于express+multer的文件上传

    关于作者 程序猿小卡,前腾讯IMWEB团队成员,阿里云栖社区专家博主.欢迎加入 Express前端交流群(197339705). 正在填坑:<Nodejs学习笔记> / <Expre ...

  2. node应用通过multer模块实现文件上传

    multer用于处理文件上传的nodejs中间件,主要跟express框架搭配使用,只支持表单MIME编码为multipart/form-data类型的数据请求. 如果要处理其他编码的表单数据可以通过 ...

  3. express4.0之后不会解析req.files,必须加一个插件multer

    express 4 + 用multer express4.0之后不会解析req.files,必须加一个插件multer http://www.w3school.com.cn/tags/att_form ...

  4. 使用multer搭建一个图片接收服务器

    为了测试图片上传插件的上传功能是否好用,最近尝试搭建了一个接收图片的服务器,因为图片上传的编码格式是form-data,所以我选择使用express+multer,实现过程中发现有几个需要注意的地方, ...

  5. 使用express+multer实现node中的图片上传

    使用express+multer实现node中的图片上传 在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中 在n ...

  6. node环境使用multer搭建一个图片接收服务器

    为了测试图片上传插件的上传功能是否好用,最近尝试搭建了一个接收图片的服务器,因为图片上传的编码格式是form-data,所以我选择使用express+multer,实现过程中发现有几个需要注意的地方, ...

  7. nodejs-使用multer实现多张图片上传,express搭建脚手架

    nodejs-使用multer实现多张图片上传,express搭建脚手架 在工作中,我们经常会看到用户有多张图片上传,并且预览展示的需求.那么在具体实现中又该怎么做呢? 本实例需要nodejs基础,本 ...

  8. NodeJs 使用 multer 实现文件上传

    Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件 注意: Multer 不会处理任何非 multipart/form- ...

  9. 【nodejs】--express的中间件multer实现图片文件上传--【XUEBIG】

    Multer是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件.该中间件不处理multipart/form-data数据格式以外的任何形式的数据 Tips ...

  10. node.js中 express + multer 处理文件上传

    multer中间件,可以很方便的结合express处理用户表单上传的文件. 一.安装multer npm install multer 二.处理单个文件上传 const express = requi ...

随机推荐

  1. android java.util.Date和java.util.sql中Date的区别

    1.将java.util.Date 转换为 java.sql.Date java.sql.Date sd; java.util.Date ud; //initialize the ud such as ...

  2. 一百三十四:CMS系统之版块管理二

    编辑 html,将数据渲染到tr上,方便js取值 js //编辑板块$(function () { $('.edit-board-btn').click(function (event) { var ...

  3. 修改IDEAL 快捷键风格

    选择File------Setting-----进入到设置窗口-------keymap--------选择自己适应的快捷键风格 选择Eclipse后Ideal的快捷键就和Eclipse相同

  4. localstack环境搭建

    前置 Python Docker Desktop 安装 1.使用pip安装aws-cli,则可以在cmd中使用aws命令: $pip install awscli 2.从dockerhub拉取kine ...

  5. Unit Testing, Integration Testing and Functional Testing

    转载自:https://codeutopia.net/blog/2015/04/11/what-are-unit-testing-integration-testing-and-functional- ...

  6. 1. PHP基本语法规则

    1.1 PHP标记: PHP语言,是一种可以嵌入到“html”代码中的后台处理语言(程序) 有以下几种标记形式,只推荐第一种.  1,<?php   php代码写在这里.....  ?> ...

  7. 最新 易车java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.易车等10家互联网公司的校招Offer,因为某些自身原因最终选择了易车.6.7月主要是做系统复习.项目复盘.LeetCode ...

  8. 前端手势控制图片插件书写二(transform矩阵的原理)

    上次解释了如何使用代码识别双指和单指操作及放大和旋转拖动操作.这次解释下css3的transform原理 一.transform矩阵原理 transform: matrix(a,b,c,d,e,f) ...

  9. centos7:ssh免密登陆设置及常见错误

    目录 一.免密登录设置 二.常见错误 三.CentOS7再ssh-copy-id时的错误 一.免密登录设置 1.使用root用户登录,进入到目录/root/.ssh 2.执行命令:ssh-keygen ...

  10. 自然语言处理工具HanLP-基于层叠HMM地名识别

    本篇接上一篇内容<HanLP-基于HMM-Viterbi的人名识别原理介绍>介绍一下层叠隐马的原理. 首先说一下上一篇介绍的人名识别效果对比: 1. 只有Jieba识别出的人名 准确率极低 ...