vue+nodejs实现上传头像，更改头像-程序员宅基地

一切从简...

前端页面

<template>
 显示头像
        <img v-bind:src='"../../../static/uploads/"+avatar' alt="">
 修改头像  @change是上传文件时点击确定的一刻触发，$event是事件对象
       <input type="file" @change="getFile($event)">
 
</template>

<script>
export default {
    mounted() {
        this.init();
    },
    methods: {、
这个接口是获取用户信息的
        init() {
            this.$http.get('/api//user/personal', {

            }).then((response) => {
                var res = response.data;
                this.username = res.username
                this.avatar = res.avatar
            })
        },
      
        getFile(event) {
            this.file = event.target.files[0];  //获取上传元素信息
            var that = this
            event.preventDefault();
            // 只能通过formData方式来传输文件
            var formData = new FormData();  
            formData.append('file', this.file);

            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
            this.$http.post('/api/image', formData, config).then(function(res) {

                console.log(res.data.code)
                if (res.data.code == '0') {
                    /*这里做处理*/  
                    that.init();  //   给avatar赋上新的值，否则要刷新获取
                }
            })
        },
    },
    data() {
        return {

            avatar: '',
 
        }
    }
}
</script>

美化一下

<style>
input {
    
    font-size: 0;
    /* 为了去掉‘未选择任何文件’这几个字，也可以随便弄到哪里*/
}


/* 注意不是直接input > input[type=button] 哦*/

input::-webkit-file-upload-button {
    
    background: #efeeee;
    color: #333;
    border: 0;
    padding: 4px;
    border-radius: 5px;
    font-size: 12px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .1), 0 0 10px rgba(0, 0, 0, .12);
}
</style>

后端接口

var formidable = require('formidable'); //上传功能的插件
var path = require('path')
var fs = require("fs");


router.post('/image', (req, res, next) => {
  //上传文件只能通过这个插件接收  file是上传文件 fields是其他的
  var form = new formidable.IncomingForm();
  form.uploadDir = path.join(__dirname, '../../static/'); //文件保存的临时目录为static文件夹（文件夹不存在会报错，一会接受的file中的path就是这个）
  form.maxFieldsSize = 1 * 1024 * 1024; //用户头像大小限制为最大1M    
  form.keepExtensions = true; //使用文件的原扩展名  
  form.parse(req, function (err, fields, file) {
    var filePath = '';
    //如果提交文件的form中将上传文件的input名设置为tmpFile，就从tmpFile中取上传文件。否则取for in循环第一个上传的文件。  
    if (file.tmpFile) {
      filePath = file.tmpFile.path;
    } else {
      for (var key in file) {
        if (file[key].path && filePath === '') {
          filePath = file[key].path;
          break;
        }
      }
    }
    //文件移动的目录文件夹，不存在时创建目标文件夹  
    var targetDir = path.join(__dirname, '../../static/uploads');
    if (!fs.existsSync(targetDir)) {
      fs.mkdir(targetDir);
    }
    var fileExt = filePath.substring(filePath.lastIndexOf('.'));
    //判断文件类型是否允许上传  
    if (('.jpg.jpeg.png.gif').indexOf(fileExt.toLowerCase()) === -1) {
      var err = new Error('此文件类型不允许上传');
      res.json({
        code: -1,
        message: '此文件类型不允许上传'
      });
    } else {
      //以当前时间戳对上传文件进行重命名  
      var fileName = new Date().getTime() + fileExt;
      var targetFile = path.join(targetDir, fileName);
      //移动文件  
      fs.rename(filePath, targetFile, function (err) {
        if (err) {
          console.info(err);
          res.json({
            code: -1,
            message: '操作失败'
          });
        } else {
          User.update({
            username: req.cookies.username
          }, {
            avatar: fileName
          }, (err2, doc2) => {

            //上传成功，返回文件的相对路径  
            // var fileUrl = '/static/upload/' + fileName;
            res.json({
              code: 0,
              fileUrl: fileName
            });
          })

        }
      });
    }
  });
})