nodejs-multer-图片处理插件

multer是一个Node.js中间件，用于处理 multipart/form-data 类型的表单数据，主要用于文件上传，注意：Multer中间件不会处理任何非 multipart/form-data 类型的表单数据。
Multer会自动添加一个body对象及file或files对象到 express框架的request 对象，fifile或fifiles对象包含表单上传的文件信息。
通过表单上传文件时需要注意的是：

（1）表单的提交方式只能是POST
（2）须设置表单的 enctype="multipart/form" 属性

1. 安装 multer插件

npm i multer -S

2.封装multer

• 存放图片的文件夹，如果没有，需要手动创建，对应destination下的文件目录
  image.png

//封装上传图片

//引进multer模块  记得在终端安装multer模块
const multer = require("multer");
const path = require('path');

//3、对上传的文件进行配置
var storage = multer.diskStorage({

  //指定文件上传到服务器的路径
  destination: function (req, file, cb) {
    cb(null, './public/images') //上传目录
  },

  //指定上传到服务器文件的名称
  filename: function (req, file, cb) {
    // 1.获取文件后缀名
    let extname = path.extname(file.originalname);
    // 2.自定义文件名格式
    const filedname = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, filedname + extname);//文件名
    // console.log(filedname+ extname);
  }
})
const upload = multer({ storage })

//导出模块
module.exports = upload

2. 使用

• 前端需要把文件流传过来

const express = require('express');
const router = express.Router();
const multer = require('../utils/multer')

router.post('/',multer.single('file') ,async (req,res) => {
  let file = req.file;
  console.log(file);
  if(file) {
    res.json({
      status: 200,
      msg: '上传成功',
      fileName: '/images/' + file.filename
    })
  } else {
    res.json({
      status: -1,
      msg: '上传失败'
    })
  }
})

module.exports = router

3. 小程序vant-weapp 用法

<van-uploader file-list="{{ fileList }}"  max-count="3" bind:after-read="afterRead" />

// 上传图片
  afterRead(event) {
    const {
      file
    } = event.detail;
    // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
    wx.uploadFile({
      url: this.data.serveraddr + '/uploadImg', // 
      filePath: file.url,//这个必传
      name: 'file',//对应multer.single('file') 的file
      formData: {
        user: 'test'
      },
      success: res => {
        // 上传完成需要更新 fileList
        console.log(res);
        const {
          fileList = []
        } = this.data;
        fileList.push({
          ...file,
          url: JSON.parse(res.data).fileName
        });
        this.setData({
          fileList
        });
      },
    });
  },

4. vue element ui 用法

跳转到其他文章： https://www.jianshu.com/writer#/notebooks/51742359/notes/97174318