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

        }
      });
    }
  });
})

 

转载于:https://www.cnblogs.com/wuyushuo/p/7478996.html

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值