NodeJS+Vue如何轻松上传并更新个人头像

在现代互联网应用中，图片上传和更新头像的功能几乎是必不可少的。本文将介绍如何在NodeJS和Vue.js的开发环境下实现这一功能。

    ### 前端使用el-upload组件上传图片
    
    1. 在前端代码中引入el-upload组件：
    
    ```html
    <el-upload
      action="/upload"
      name="avatar"
      show-file-list="false"
      on-success="handleAvatarSuccess"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">点击上传头像</div>
    </el-upload>
    ```
    
    2. 定义handleAvatarSuccess方法来处理上传成功的回调：
    
    ```javascript
    handleAvatarSuccess(response) {
      this.$message.success('头像上传成功！');
      this.avatarUrl = response.data.url;
    }
    ```
    
    ### 后端使用formidable中间件解析图片
    
    1. 安装formidable中间件：
    
    ```
    npm install formidable
    ```
    
    2. 在后端代码中引入formidable中间件：
    
    ```javascript
    const formidable = require('formidable');
    ```
    
    3. 定义图片上传路由：
    
    ```javascript
    app.post('/upload', (req, res) => {
      const form = new formidable.IncomingForm();
      form.parse(req, (err, fields, files) => {
        if (err) {
          res.status(500).json({ error: '上传失败' });
          return;
        }
    
        const file = files.avatar;
        const filePath = path.join(__dirname, 'public', 'avatars', file.name);
    
        file.mv(filePath, (err) => {
          if (err) {
            res.status(500).json({ error: '保存文件失败' });
            return;
          }
    
          res.json({ url: `/avatars/${file.name}` });
        });
      });
    });
    ```
    
    ### 前端根据图片路径渲染头像
    
    ```html
    <el-avatar :src="avatarUrl" />
    ```
    
    ### 总结
    
    通过以上步骤，我们可以在NodeJS和Vue.js的开发环境下实现图片上传并更新个人头像的功能。希望本文对您有所帮助。