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
            });
          })

        }
      });
    }
  });
})