Layui+Node.js+express+Multer 实现 前后端分离 上传图片

express Multer 官方文档

Express multer middleware - Express中文文档 | Express中文网 (expressjs.com.cn)

中间件

layui 前端上传代码：

上传组件 upload - Layui 文档

部份代码：

<button type="button" class="layui-btn" id="ID-upload-demo-btn">
  <i class="layui-icon layui-icon-upload"></i> 单图片上传
</button>
<div style="width: 132px;">
  <div class="layui-upload-list">
    <img class="layui-upload-img" id="ID-upload-demo-img" style="width: 100%; height: 92px;">
    <div id="ID-upload-demo-text"></div>
  </div>
  <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="filter-demo">
    <div class="layui-progress-bar" lay-percent=""></div>
  </div>
</div>


js部份
<script>
layui.use(function(){
  var upload = layui.upload;
  var layer = layui.layer;
  var element = layui.element;
  var $ = layui.$;
  // 单图片上传
  var uploadInst = upload.render({
    elem: '#ID-upload-demo-btn',
    url: 'http://localhost:3006/upload', // 实际使用时改成您自己的上传接口即可。
	// method: 'post',
    before: function(obj){
      // 预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#ID-upload-demo-img').attr('src', result); // 图片链接（base64）
		console.log('result')
      });
      
      element.progress('filter-demo', '0%'); // 进度条复位
      layer.msg('上传中', {icon: 16, time: 0});
    },
    done: function(res){
      // 若上传失败
	  console.log(res)
      if(res.code > 0){
        return layer.msg('上传失败');
      }
      // 上传成功的一些操作
      // …
      $('#ID-upload-demo-text').html(''); // 置空上传失败的状态
    },
    error: function(){
      // 演示失败状态，并实现重传
      var demoText = $('#ID-upload-demo-text');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    },
    // 进度条
    progress: function(n, elem, e){
      element.progress('filter-demo', n + '%'); // 可配合 layui 进度条元素使用
      if(n == 100){
        layer.msg('上传完毕', {icon: 1});
      }
    }
  });
</script>

图示：

建目录：

后端代码：

npm install --save multer

const express = require('express')
const multer  = require('multer')
const fs = require('fs')
const { json } = require('express');
const app = express()

app.use((req,resp,next) => {
     // 跨域设置 
     resp.header("Access-Control-Allow-Credentials", true);
     resp.header("Access-Control-Allow-Origin", "*");
     resp.header("Access-Control-Allow-Headers", "X-Requested-With");
     resp.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
     resp.header("X-Powered-By", ' 3.2.1');
     resp.header("Content-Type", "application/json;charset=utf-8");
     next();
 });

app.get('/',function(req, res, next){
	res.send({
		success:true
	})
});

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './upload')
  },
  filename: function (req, file, cb) {
    // const uniqueSuffix = Date.now()
    // cb(null, uniqueSuffix + '-' +file.originalname)
	// 解决中文名乱码的问题
	file.originalname = Buffer.from(file.originalname, "latin1").toString(
	      "utf8"
	    );
    cb(null, file.originalname)
  }
})


app.post('/upload', multer({
	storage: storage
}).single('file'),(req, res) =>{
	console.log(req.file);
	// res.send(req.file)
	// res.json()
	const url = './upload/' + req.file.filename;
	res.json({ 
	    code: 0, 
	    msg: '上传成功！', 
	    data: { 
	        src: url,
	    }
	})
});


app.listen(3006, () => { //创建监听
	console.log(`server is running at http://localhost:3006`);
    console.log('服务器启动成功...')
})

注：

1. 文件名中文乱码 解决

2.跨域设置 要做，免得测式不行！！