后端使用multer完成头像上传

一、下载插件multer

npm install --save multer

二、创建数据表

三、图片上传流程

1.前端使用接口上传图像

2.接口返回头像图片在服务器端的url地址

3.前端调用接口，我们把当前账号与图片url地址绑定，并往user表中插入url地址

4.要通过唯一标识onlyId来代替图片与账号进行绑定，使用crypto库中的uuid

四、使用multer 

1.分别在router和router-handle中创建userinfo和一些引入(需要node基础)

2.在app.js中全局挂载multer

const multer = require('multer') 
// 在server服务器新建一个public文件 新建一个uploads文件存放图片
const upload = multer({dest:'./public/upload'})

// 处理文件上传
app.use(upload.any())
// 静态托管
app.use(express.static('./public'))

3.上传图像接口 需要传入新图片 image_url

const mysql = require('mysql') //导入mysql数据库
const db = require('../db/index.js')
const bcrypt = require('bcryptjs')
//引用 crypto 生成uuid
const crypto = require('crypto')
//处理文件上传
const fs = require('fs')

exports.uploadAvatar = (req, res) => {
    //生成唯一标识
    const onlyId = crypto.randomUUID()
    //获取文件名
    let oldName = req.files[0].filename
    //定义了一个 Buffer 类，该类用来创建一个专门存放二进制数据的缓存区
    //在 6.0 之前直接使用 new 的方式创建Buffer，后面都通过 Buffer.from() 方法来创建
    //服务器中的文件名称
    //latin1 是一种字符编码，也被称为 cp1252 或 ISO-8859-
    //它是 Latin1 字符集的一个子集，主要在早期的 MySQL 数据库中使用
    //toString('utf8')防止乱码
    let newName = Buffer.from(req.files[0].originalname, 'latin1').toString('utf8')
    //更换文件在服务器中的名字
    fs.renameSync('./public/upload/' + oldName, './public/upload/' + newName)
    const sql = 'insert into image set ?'
    db.query(sql, {
        image_url: `http://127.0.0.1:3000/public/upload/${newName}`,
        onlyId
    }, (err, results) => {
        if (err) return res.cc(err)
        //接口调用成功并返回数据
        res.send({
            onlyId,
            status: 0,
            rul: `http://127.0.0.1:3000/public/upload/${newName}`,
            message: '上传成功'
        })
    })
}       

五、绑定账号

1.需要前端传递过来的三个参数 account onlyId url

2.需要修改两个表，image表和users表

3.通过onlyId来修改image表中的account ，从而绑定账户和图像地址

4.然后再通过绑定后的account来修改users中的image_url

作用：这样前端去访问图像地址时不至于所有同名的文件绑定再同一个账户上面

const db = require('../db/index.js')
const bcrypt = require('bcryptjs')
//引用 crypto 生成uuid
const crypto = require('crypto')
//处理文件上传
fs = require('fs')

//上传头像
exports.uploadAvatar = (req, res) => {
    //生成唯一标识
    const onlyId = crypto.randomUUID()
    //获取文件名
    let oldName = req.files[0].filename;
    //定义了一个 Buffer 类，该类用来创建一个专门存放二进制数据的缓存区
    //在 6.0 之前直接使用 new 的方式创建Buffer，后面都通过 Buffer.from() 方法来创建
    //服务器中的文件名称
    //latin1 是一种字符编码，也被称为 cp1252 或 ISO-8859-
    //它是 Latin1 字符集的一个子集，主要在早期的 MySQL 数据库中使用
    //toString('utf8')防止乱码
    let newName = Buffer.from(req.files[0].originalname, 'latin1').toString('utf8')
    //更换文件在服务器中的名字  原名字                    新名字
    fs.renameSync('./public/upload/' + oldName, './public/upload/' + newName)
    const sql = 'insert into image set ?'
    db.query(sql, {
        //插入新的数据
        image_url: `http://127.0.0.1:3007/upload/${newName}`,
        //插入唯一标识
        onlyId
    }, (err, results) => {
        if (err) return res.cc(err)
        //接口调用成功并返回数据
        res.send({
            onlyId,
            status: 0,
            url: `http://127.0.0.1:3007/upload/${newName}`,
        })
    })
}        

// 绑定账号
//前端传递的三个参数 account onlyId url
exports.bindAccount = (req, res) => {
    const {account,onlyId,url} = req.body
    //修改image表中的account 通过onlyId
    const sql = 'update image set account = ? where onlyId = ?'
    db.query(sql,[account,onlyId],(err,results)=>{
        if(err) return res.cc(err)
            //修改成功后修改users表中的image_url 通过account
        if(results.affectedRows == 1){
            const sql1 = 'update users set image_url = ? where account = ?'
            db.query(sql1,[url,account],(err,results)=>{
                if(err) return res.cc(err)
                res.send({
                    status: 0,
                    message: '修改成功'
                })
            })
        } 
    })
}

最后在router文件中暴露接口就使用了