利用nodeJS+vue图片上传实现更新头像的过程

<!--头像上传-->
<el-upload
  class="avatar-uploader"
  action="http://localhost:3007/api/upload"
  :data= this.avatarForm
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imageUrl" :src="imageUrl" class="avatar">
  <i v-else class="avatar-uploader-icon">点击修改头像</i>
</el-upload>

beforeAvatarUpload(file) {
  console.log(file.type)
  const isJPG = file.type === 'image/jpeg'
  const isPNG = file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!(isJPG || isPNG)) {
    this.$message.error('上传头像图片只能是 JPG 格式!')
  }
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!')
  }
  return (isPNG || isJPG) && isLt2M
}

handleAvatarSuccess(res, file) {
  if (res.status === '1') return this.$message.error(res.message)
  this.imageUrl = `http://localhost:3007/public/${res.srcurl}`  //拼接路径
  this.$message.success('修改头像成功')
}

mounted() {
  this.name = window.sessionStorage.getItem('username')
  this.user_pic = window.sessionStorage.getItem('user_pic')
  this.user_id = window.sessionStorage.getItem('user_id')
  this.avatarForm = {
    name: this.name, // 用户名
    user_id: this.user_id // 用户ID
  }
  this.getUserAvata()
}

"dependencies": {
  "express": "^4.16.2",
  "cors": "^2.8.5",
  "formidable": "^1.1.1"
}

var express = require('express');
var app = express();

//引入数据库模块存储用户当前的头像地址
const db = require('../db/index');

// 设置运行跨域
const cors = require('cors')
app.use(cors())

// 处理图片文件中间件
var formidable = require("formidable");
fs = require("fs");

// 暴露静态资源
app.use('/public', express.static('public'));

// 上传图片服务
app.post('/upload', function (req, res) {
    var info = {};
    // 初始化处理文件对象
    var form = new formidable.IncomingForm();
    form.parse(req, function(error, fields, files) {
        if(error) {
            info.status = '1';
            info.message = '上传头像失败';
            res.send(info);
        }
        // fields 除了图片外的信息
        // files 图片信息
        console.log(fields);
        console.log(files);
        var user_id = parseInt(fields.user_id);
        var fullFileName = fields.name + user_id + files.file.name;// 拼接图片名称：用户名+用户ID+图片名称
        fs.writeFileSync(`public/${fullFileName}`, fs.readFileSync(files.file.path)); // 存储图片到public静态资源文件夹下

        // 更新用户当前头像地址信息
        const sql = 'update ev_users set user_pic = ? where id = ?';
        db.query(sql, [fullFileName, user_id], function (err, results) {
            // 执行 SQL 语句失败
            if (err) {
                info.status = '1';
                info.message = '上传失败';        
                return (info)
            }
            info.status = '0';
            info.message = 'success';
            info.srcurl = fullFileName;
            res.send(info);
        });
    });
});

var server = app.listen(3007, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Example app listening at http://localhost:%s', port);
});