node.js上传图片到服务端，并将图片路径传到数据库（更换头像）

思路

1. 本地选择图片文件之后，将图片文件转换成base64的数据格式
2. 将base64的数据通过ajax专递到后台（post）
3. 后台将base64的数据解析成图片进行保存到服务器上

文件结构

├── page
	├── js
		├── js.js
	├── html.html
├── dao
	├── dataDao.js
└── node.js

html

 <input type="file" name="file" accept="image/*" id="file">
 <div class="sureToUpDataImg">确认上传</div>

js

$("#file").change(() => {
    let reader = new FileReader();
    // 设置上传的图片最大文件大小，单位为字节，2M ≈ 2097152B
    let AllowImgFileSize = 2100000;
    let file = $("#file")[0].files[0];
    let imgUrlBase64;
    if (file) {
        imgUrlBase64 = reader.readAsDataURL(file);
        reader.onload = function(e) {
            // var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;
            // 上一行注释了的代码表示截取base64码部分
            // 具体是否在前端截取，需要与后台沟通
            if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
                alert('上传失败，请上传2M以内的图片！');
                return;
            } else {
                // 执行上传操作
                // $("#showImg").attr("src", reader.result);
                // 将图片显示在页面上，可省略

                $(".sureToUpDataImg").click(() => {
                    $.post("/upload", {
                        "teachID": sessionStorage['teachID'],
                        "imgData": reader.result,
                    }, data => {
                        console.log(data);
                    })
                })
            }
        }
    }
})

node.js

let dao = require("./dao/dataDao.js");

const express = require("express");
const fs = require("fs");
const bodyParser = require('body-parser')

const app = express();

// 增大可传递的数据大小值
app.use(bodyParser.json({ limit: '50mb' }));
app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }));

//静态伺服
app.use(express.static("page"));

// 上传头像
app.post('/upload', function(req, res) {
    //接收前台POST过来的base64
    let imgData = req.body.imgData;
    if (imgData) {
        //过滤data:URL
        let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
        let dataBuffer = new Buffer.from(base64Data, 'base64');
        // 存储文件命名是使用当前时间，防止文件重名
        let saveUrl = "./page/headImg/" + (new Date()).getTime() + ".png";
        fs.writeFile(saveUrl, dataBuffer, function(err) {
            if (err) {
                res.send(err);
            } else {
                // res.send("保存成功！");
                dao.upDataTeachImg(
                    req.body.teachID, saveUrl.slice(6),
                    (err, result) => {
                        if (err) {
                            send(err);
                        } else {
                            res.send("1");
                        }
                    }
                )
            }
        });
    }
});

// 监听端口
app.listen(8080, () => {
    console.log('Server running at 8080 port');
});

/dao/dataDao.js

const mysql = require("mysql");

// 创建mysql实例
// 本地数据库实例
let connection = mysql.createConnection({
    host: '127.0.0.1',
    port: '3306',
    user: 'root',
    password: '123456',
    database: 'wlw_db',
    // 可同时执行多条sql语句
    multipleStatements: true,
});

connection.connect((err) => {
    console.log(err ? "connconnect fail!!!" : "connect success!!!");
});

// 上传头像
let upDataTeachImg = function(teachID, saveUrl, callback) {
    let sql = `update teacherData set teachImg = '${saveUrl}' 
        where teachID = '${teachID}'`;
    connection.query(sql, function(err, result) {
        callback(err, result);
    })
}

exports.upDataTeachImg = upDataTeachImg;