Vue3＋Node.js前后端用户头像上传＋更新功能

迦罗远洲

已于 2023-05-20 18:40:56 修改

阅读量992

点赞数

CC 4.0 BY-SA版权

文章标签： node.js vue.js 前端

于 2023-05-20 17:50:51 首次发布

本文链接：https://blog.csdn.net/2203_75725182/article/details/130783582

本文介绍如何使用Vue3和Node.js配合Multer库实现前端用户头像的上传功能。在后端，通过npm安装multer来解析前端以formdata格式发送的头像文件，并配置路由处理文件上传。而在前端，利用element-plus的upload组件完成头像选择和上传操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后端

npm i multer：解析前端发送的formdata格式的头像文件。

配置multer（代码较多，封装成文件）

const multer = require('multer')
const path = require('path')
const fs = require('fs')

const upload = multer({
  storage: multer.diskStorage(
    // 配置文件存放目录
    destination: (req, file, cb) => {
      let dest = path.join(__dirname, `../public/userpic/${padZero(req.auth.id).toString()}`) // 用户id命名
      
      // fs.existsSync(目录名)：判断文件目录是否存在
      if (!fs.existsSync(dest)) {
        // fs.mkdirSync()：没有则创建
        fs.mkdirSync(dest, { recursive: true })
      }

      // 新头像文件代替旧头像文件：
      let olduserpic = fs.readdirSync(dest)
      // fs.readdirSync(目录名)：读取文件目录下的子文件，返回子文件名组成的数组
      if (olduserpic.length) {
        // 若存在文件，则删除
        fs.unlinkSync(`${dest}/${olduserpic[0]}`)
      }
      cb(null, dest)
    },
    // 配置文件名
    filename: (req, file, cb) => {
      cb(null, Date.now().toString()) // 用时间戳命名 文件名不能为纯数字
    }

最低0.47元/天解锁文章

新学期VIP享超值加赠