完成头像上传功能:使用node+express实现将前端发送的base64格式的图片转化为png格式的图片并保存在文件夹,同时将相对路径保存在数据库中

1.封装mkdirs模块判断文件夹是否已经存在,不存在就创建

// 动态新建文件夹的方法
const fs = require('fs'); // 导入 fs 模块
const path = require('path'); // 导入 path 模块

exports.mkdirs = (pathname, callback) => {
  // 需要判断是否是绝对路径(避免不必要的 bug)
  pathname = path.isAbsolute(pathname) ? pathname : path.join(__dirname, pathname);

  // 获取相对路径
  pathname = path.relative(__dirname, pathname);

  // path.sep 避免平台差异带来的 bug
  const floders = pathname.split(path.sep);

  let pre = ''; // 最终用来拼合的路径
  floders.forEach(floder => {
    try {
      // 没有异常,文件已经创建,提示用户该文件已经创建
      const _stat = fs.statSync(path.join(__dirname, pre, floder));
      const hasMkdir = _stat && _stat.isDirectory();
      if (hasMkdir) {
        callback // && callback(`文件${floder}已经存在,不能重复创建,请重新创建!`)
      }
    } catch (err) {
      // 抛出异常,文件不存在则创建文件
      try {
        // 避免父文件还没有创建的时候,先创建子文件所出现的意外 bug,这里选择同步创建文件
        fs.mkdirSync(path.join(__dirname, pre, floder));
        callback && callback(null);
      } catch (error) {
        callback && callback(error);
      }
    }
    pre = path.join(pre, floder); // 路径拼合
  });
}

2.头像上传对应的路由处理函数

const db = require('../db/index')
const fs = require('fs');
const path = require('path');
//导入判断目录是否已经存在的处理模块
const mkdir = require('../tools/mkdir')

//修改用户头像
exports.updateAvatar = (req, res) => {
  //获取用户信息
  const user = req.user;
  //去掉图片base64码前面部分data:image/png;base64
  const base64 = req.body.avatar.replace(/^data:image\/\w+;base64,/, "");
  //把base64码转成buffer对象,
  const dataBuffer = new Buffer.from(base64, 'base64')
  // 根据路径动态创建文件夹,如果文件夹存在就不再创建文件夹,反之则创建文件夹
  mkdir.mkdirs(path.join(__dirname, `../img/${user.username}`), err => {
    console.log(err); // 错误的话,直接打印
  });
  const avatarPath = path.join(__dirname, `../img/${user.username}/avatar.png`)
  fs.writeFile(avatarPath, dataBuffer, function (err) {//用fs写入文件
    if (err) {
      console.log(err);
    } else {
      console.log('写入成功!');
    }
  })
  //保存头像的相对地址到数据库中
  const avatarUrl = `/img/${user.username}/avatar.png`
  // 执行sql语句
  const sql = 'update bg_users set user_pic=? where id=?'
  db.query(sql, [avatarUrl, req.user.id], (err, results) => {
    // 执行 SQL 语句失败
    if (err) return res.error(err)

    // 执行 SQL 语句成功,但是影响行数不等于 1
    if (results.affectedRows !== 1) return res.error('更新头像失败!')

    // 更新用户头像成功
    return res.success(0, '更新头像成功!', null)
  })
}

猜你喜欢

转载自blog.csdn.net/h18377528386/article/details/126130216