multer是一個(gè)Node.js中間件，用于處理 multipart/form-data 類型的表單數(shù)據(jù)，主要用于文件上傳，注意：Multer中間件不會(huì)處理任何非 multipart/form-data 類型的表單數(shù)據(jù)。
Multer會(huì)自動(dòng)添加一個(gè)body對(duì)象及file或files對(duì)象到 express框架的request 對(duì)象，fifile或fifiles對(duì)象包含表單上傳的文件信息。
通過(guò)表單上傳文件時(shí)需要注意的是：

（1）表單的提交方式只能是POST
（2）須設(shè)置表單的 enctype="multipart/form" 屬性

1. 安裝 multer插件

npm i multer -S

2.封裝multer

• 存放圖片的文件夾，如果沒(méi)有，需要手動(dòng)創(chuàng)建，對(duì)應(yīng)destination下的文件目錄
  
  image.png

//封裝上傳圖片

//引進(jìn)multer模塊  記得在終端安裝multer模塊
const multer = require("multer");
const path = require('path');

//3、對(duì)上傳的文件進(jìn)行配置
var storage = multer.diskStorage({

  //指定文件上傳到服務(wù)器的路徑
  destination: function (req, file, cb) {
    cb(null, './public/images') //上傳目錄
  },

  //指定上傳到服務(wù)器文件的名稱
  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 })

//導(dǎo)出模塊
module.exports = upload

2. 使用

• 前端需要把文件流傳過(guò)來(lái)

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;
    // 當(dāng)設(shè)置 mutiple 為 true 時(shí), file 為數(shù)組格式，否則為對(duì)象格式
    wx.uploadFile({
      url: this.data.serveraddr + '/uploadImg', // 
      filePath: file.url,//這個(gè)必傳
      name: 'file',//對(duì)應(yīng)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 用法

跳轉(zhuǎn)到其他文章： http://m.itdecent.cn/writer#/notebooks/51742359/notes/97174318