前端vue利用element-ui组件传到node后台，实现图片存储；

node.js文件

目录结构

接收图片信息，将图片存储到服务端文件夹。
注意看注释

var mysql = require("mysql")
var express = require("express")
// 安装multer,并实例化
// Multer 是一个 node.js 中间件,用于处理 multipart/form-data 类型的表单数据,它主要用于上传文件。
var multer = require('multer')
let app = express()
// 连接数据库
var connection = mysql.createConnection ({
    host: "localhost",
    user : 'tch_new',
    password : 'tch_password',
    database : 'tchsql'
})

// 跨域
app.all('*', function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*")
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS")
    res.header("X-Powered-By",' 3.2.1')
    res.header("Content-Type", "application/json;charset=utf-8")
    next()
})

connection.connect()
// 配置静态文件夹，图片存放
const upload = multer({dest: __dirname + '/upload'})
// 接收vue项目传来的图片
app.post('/uploadImg',upload.single('file'), async (req, res) => {
    const file = req.file
    // 这里是拼接返回给前端的路径，现在所获取到的filename是没有文件格式的，但是在本地的项目时，是可以展示的。
    // 如果作为线上项目，你要配置public文件夹
    // 代码-线上接口，展示的是以5000端口返回的图片地址有图片格式的返回
    file.url = `http://localhost:8080/upload/${file.filename}`
    res.json(file)
})
// 开通端口
var server =  app.listen(5000, function() {
    var host = server.address().address
    var port = server.address().port
    console.log(host,'这是host')
    console.log(port,'这是port')
})

线上接口
首先要创建一个 public文件夹

// 可以用public做为前缀来加载static文件夹下的文件了
app.use('/public', express.static(path.join(__dirname, './public')));

// 根据当前文件目录指定文件夹
const dir = path.resolve(__dirname, './public/img');
// 图片大小限制KB
const SIZELIMIT = 20000000;
const storage = multer.diskStorage({
    // 指定文件路径
    destination: function(req, file, cb) {
        // ！！！相对路径时以node执行目录为基准，避免权限问题，该目录最好已存在*
        // cb(null, './uploads');
        cb(null, dir);
    },
    // 指定文件名
    filename: function(req, file, cb) {
        // filedname指向参数key值
        cb(null, Date.now() + '-' + file.originalname);
    }
});
const upload = multer({
    storage: storage
});
app.post('/uploadImg', upload.single('file'), (req, res) => {
    // 即将上传图片的key值 form-data对象{key: value}
    // 检查是否有文件待上传
    if (req.file === undefined) {
        return res.send({
            errno: -1,
            msg: 'no file'
        });
    }
    const {size, mimetype, filename} = req.file;
    const types = ['jpg', 'jpeg', 'png', 'gif'];
    const tmpTypes = mimetype.split('/')[1];
    // 检查文件大小
    if (size >= SIZELIMIT) {
        return res.send({
            errno: -1,
            msg: 'file is too large'
        });
    }
    // 路径可根据设置的静态目录指定
    console.log(req.file)
    file = req.file
    const url = `http://localhost:5000/img/${file.filename}`
    fs.readFile('./public/img/'+ file.filename +"", function (err, res) {
        if (err) {
            console.log(err)
        }
        console.log(res)
    })
    res.json({
        errno: 0,
        msg: 'upload success',
        file,
        url
    });
});

upload.vue文件
vue + element-ui

	<template>
        <!-- 图片上传 -->
        <el-upload
          action="http://localhost:5000/uploadImg" // 这里的路径填写后台开启的端口
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :before-upload="beforeUpload"
          :on-remove="handleRemove"
          :on-progress="sendIng"
          :on-error="sendErr"
          :on-success="sendSuccess"
          >
	</template>
	<script>
	data () {
	    return {
	      dialogImageUrl: '', // 接口返回的图片地址
	      returnImgUrl: [], // 用来存放图片地址
	    }
      }
       methods: {
       		// 下面这些方法获得不同上传信息，打印出来值，看需要哪个参数，就保留哪个方法。
		   removeDomain (item) {
		      var index = this.dynamicValidateForm.domains.indexOf(item)
		      this.thisIndex = index
		      if (index !== -1) {
		        this.returnImgUrl.splice(this.thisIndex, 1)
		        this.dynamicValidateForm.domains.splice(index, 1)
		      }
		    },
		    handleRemove (file, fileList) {
		      this.returnImgUrl.splice(this.thisIndex, 1)
		    },
		    handlePictureCardPreview (file) {
		      this.dialogImageUrl = file.url
		      console.log(file.url)
		      this.dialogVisible = true
		    },
		    sendIng (event, file) {
		      console.log(event)
		      console.log(file)
		    },
		    sendErr (err) {
		      console.log(err)
		    },
		    // 图片路径
		    beforeUpload (file) {
		      console.log(file)
		      console.log(this.dialogImageUrl)
		    },
       }
	</script>