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


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

    1. // 动态新建文件夹的方法
    2. const fs = require('fs'); // 导入 fs 模块
    3. const path = require('path'); // 导入 path 模块
    4. exports.mkdirs = (pathname, callback) => {
    5. // 需要判断是否是绝对路径(避免不必要的 bug)
    6. pathname = path.isAbsolute(pathname) ? pathname : path.join(__dirname, pathname);
    7. // 获取相对路径
    8. pathname = path.relative(__dirname, pathname);
    9. // path.sep 避免平台差异带来的 bug
    10. const floders = pathname.split(path.sep);
    11. let pre = ''; // 最终用来拼合的路径
    12. floders.forEach(floder => {
    13. try {
    14. // 没有异常,文件已经创建,提示用户该文件已经创建
    15. const _stat = fs.statSync(path.join(__dirname, pre, floder));
    16. const hasMkdir = _stat && _stat.isDirectory();
    17. if (hasMkdir) {
    18. callback // && callback(`文件${floder}已经存在,不能重复创建,请重新创建!`)
    19. }
    20. } catch (err) {
    21. // 抛出异常,文件不存在则创建文件
    22. try {
    23. // 避免父文件还没有创建的时候,先创建子文件所出现的意外 bug,这里选择同步创建文件
    24. fs.mkdirSync(path.join(__dirname, pre, floder));
    25. callback && callback(null);
    26. } catch (error) {
    27. callback && callback(error);
    28. }
    29. }
    30. pre = path.join(pre, floder); // 路径拼合
    31. });
    32. }

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

    1. const db = require('../db/index')
    2. const fs = require('fs');
    3. const path = require('path');
    4. //导入判断目录是否已经存在的处理模块
    5. const mkdir = require('../tools/mkdir')
    6. //修改用户头像
    7. exports.updateAvatar = (req, res) => {
    8. //获取用户信息
    9. const user = req.user;
    10. //去掉图片base64码前面部分data:image/png;base64
    11. const base64 = req.body.avatar.replace(/^data:image\/\w+;base64,/, "");
    12. //把base64码转成buffer对象,
    13. const dataBuffer = new Buffer.from(base64, 'base64')
    14. // 根据路径动态创建文件夹,如果文件夹存在就不再创建文件夹,反之则创建文件夹
    15. mkdir.mkdirs(path.join(__dirname, `../img/${user.username}`), err => {
    16. console.log(err); // 错误的话,直接打印
    17. });
    18. const avatarPath = path.join(__dirname, `../img/${user.username}/avatar.png`)
    19. fs.writeFile(avatarPath, dataBuffer, function (err) {//用fs写入文件
    20. if (err) {
    21. console.log(err);
    22. } else {
    23. console.log('写入成功!');
    24. }
    25. })
    26. //保存头像的相对地址到数据库中
    27. const avatarUrl = `/img/${user.username}/avatar.png`
    28. // 执行sql语句
    29. const sql = 'update bg_users set user_pic=? where id=?'
    30. db.query(sql, [avatarUrl, req.user.id], (err, results) => {
    31. // 执行 SQL 语句失败
    32. if (err) return res.error(err)
    33. // 执行 SQL 语句成功,但是影响行数不等于 1
    34. if (results.affectedRows !== 1) return res.error('更新头像失败!')
    35. // 更新用户头像成功
    36. return res.success(0, '更新头像成功!', null)
    37. })
    38. }

  • 相关阅读:
    6_sleuth-zipkin-spring_boot_admin 链路追踪
    中国石油大学(北京)-《 完井工程》第一阶段在线作业
    面试题汇总
    NameNode故障处理的两种方法
    Spring 类路径扫描和组件托管
    解决Netty那些事儿之Reactor在Netty中的实现(创建篇)-下
    xLua背包实践
    网工内推 | 运维工程师,软考认证优先,全额社保
    ESP32的VScode环境搭建
    springboot毕设项目车辆道路管理系统qy68y(java+VUE+Mybatis+Maven+Mysql)
  • 原文地址:https://blog.csdn.net/h18377528386/article/details/126130216