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

Posted 2021-02-13 XUEBIGXUE

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的详解