码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-03-17 15:46:24      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:服务   query   使用   数据对象   sim   str   handles   als   name   

Multer是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件。该中间件不处理multipart/form-data数据格式以外的任何形式的数据
Tips:multipart/form-data是用来指定传输数据的特殊类型的,主要就是我们上传的非文本的内容,比如图片或者mp3等等
 
1、安装第三方插件
cnpm install multer --save
 
2、配置文件
//引入依赖模块
var express = require(‘express‘);
var router = express.Router();
var multer = require("multer");
 
var storage = multer.diskStorage({
 
    //将上传的文件存储在指定的位置(不存在的话需要手动创建)
    destination: function (req, file, cb) {
        cb(null, ‘./public/imgs‘)
    },
    //将上传的文件做名称的更改
    filename: function (req, file, cb) {
        cb(null,  Date.now()+"-"+file.originalname )
    }
})
 
//创建multer对象
var upload = multer({ storage: storage })
 
//指定当前字段可以携带多个文件
var cpUpload = upload.fields([{ name: ‘companylogo‘, maxCount: 1 }])
 
// 导出模块
module.exports = router;
 
3、解析upload方法:
      
  upload.single(‘key值‘):当传递单个文件的时候,对文件的解析,该附件将被保存到req.file属性中
 
        upload.array(‘key值‘, maxCout):当传递一组文件的时候,对文件的解析 key值是前端传递的key值, maxcout是最多能传递多少个文件,如果附件的数量大于maxCount则抛出异常。文件数组将被储存到req.files属性中。
 
        upload.fields([{ name: ‘key值‘, maxCount: num }, { name: ‘key值‘, maxCount: num }]):当传递多个文件域的时候,对文件的解析,附件将被保存到req.files属性中(是一个对象数组)
 
        .any()接收所有提交的数据,保存到req.files属性中

 

 
4、file为上传字段名称,当使用form表单submit方式上传时,必须与表单上传的name属性保持一致。表单记得加上 enctype=‘multipart/form-data’
 
客户端传递(使用formdata模拟表单提交数据)
//创建一个表单数据对象
var formData = new FormData();
 
var goods_name = $("#goods_name");
var goods_des = $("#goods_des");
var goods_price = $("#goods_price");
var goods_img = $("#goods_img");
var goods_imgs = $("#goods_imgs");
 
//使用append方法将数据提交到formdata中
formData.append("goodsName",goods_name.val());
formData.append("gooddsDes",goods_des.val())
formData.append("goodsPrice",goods_price.val())
formData.append("goodsImg",goods_img[0].files[0])
 
//使用便利遍历将多个文件/图片遍历出来
for(var i=0;i<goods_imgs[0].files.length;i++){
formData.append("goodsImgs",goods_imgs[0].files[i])
}
 
//发起ajax请求
$.ajax({
type:"post",
url:"/api/goods/addGoods",
cache: false,//不读取缓存中的结果 true的话会读缓存  其实post本身就不会读取缓存中的结构
processData: false,//默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。
contentType: false,//数据编码格式不使用jquery的方式 为了避免 JQuery 对其操作,从而失去分界符,而使服务器不能正常解析文件。data:formData,
success:$.proxy(this.handleSuccCb)
})

上一篇是关于formdata的详解

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

标签:服务   query   使用   数据对象   sim   str   handles   als   name   

原文地址:https://www.cnblogs.com/xuelanying/p/10547009.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!