头像上传nodeJs(express) + vue

@[TOC](nodeJs(express) + vue)

1.node 安装插件

cnpm i multer -S

2.写一个上传问文件的input框

  <div class="uploadimg">
    <input class="fileInput" type="file" ref="file" @change="changeFile" />
    <img class="avatar" :src="pic" alt @click="changeAvatar" />
  </div>

3.改变点击事件

 changeAvatar() {
      //通过点击图片来触发input框的click事件
      this.$refs.file.click();
    },

4.node选择硬盘存储和设置文件名

var storage = multer.diskStorage({
    destination: function (req, file, cb) { //上传目录
        cb(null, './public/upload') //注意在public创建upload文件夹
    },
    filename: function (req, file, cb) { //上传图片的文件名
        //加上时间戳 防止上传同一张图片重名
        var timer = Date.now()
        cb(null, timer + "vueapp" + file.originalname) //上传的文件名originalname
    }
})
var upload = multer({ storage: storage }).any();//any表示接收任何格式的文件

5.上传头像接口

//上传头像
router.post("/uploadimg", upload, (req, res) => {
    console.log("头像上传成功")
    console.log(req.files);
    if (req.files) {
        var imgpath = req.files[0].path  //上传后图片的路径
        //数据库查询并更新返回
        Uservueapp.findOneAndUpdate({
        	//取session的值
            usermobile: req.session.usermobile
        }, {
            $set: {
                avatar: imgpath
            }
        }).then(data => {
            console.log(data);
            res.json({
                code: 200,
                msg: "头像上传成功",
                type: 1,
                imgpath,
                data
            })
        })
    } else {
        res.json({
            code: 200,
            msh: "头像上传失败",
            type: 0,
        })
    }
})

6.change事件发送上传请求

changeFile() {
      console.log(this.$refs.file.files[0]);
      var file = this.$refs.file.files[0];
      var data = new FormData(); //浏览器的内置对象 实例化一个表单对象(appliaction/formdata)  data.xxx
      data.append("avatar", file); //配置key为 avatar

      //上传头像请求  主动上传头像
      this.$axios({
        url: "/vue/uploadimg",
        method: "POST", //只能是post请求
        data: data
      }).then(res => {
        console.log(res);
        if (res.data.type) {
          //方法一：使用axios里面的基路径   node里面public是绝对路径
          this.pic = res.data.imgpath.replace(/public/, baseUrl);
          //方法二：反向代理 因为我使用了反向代理
          //this.pic = "/" + res.data.imgpath;
          //请求成功后存入数据到本地用于后面判断
          let users = {
            picpath: this.pic, //this.pic就是最新修改的头像路径
            usermobile: res.data.data.usermobile
          };
          localStorage.setItem("users", JSON.stringify(users));
        }
      });
 },

7.获取头接口

//获取头像
router.post("/getavatar", (req, res) => {
    Uservueapp.findOne({
        usermobile: req.session.usermobile
    }).then(data => {
        if (data.avatar) {
            req.json({
                code: 200,
                msg: "获取头像成功",
                type: 1,
                data  //返回获取的数据
            })
        } else {
            req.json({
                code: 200,
                msg: "获取头像失败",
                type: 1,
            })
        }

    })
})

8.发送获取头像请求

getAvatar() {
      //获取头像请求
      this.$axios.post("/vue/getavatar").then(res => {
        if (res) {
          if (res.data.type) {
          	//请求成功修改设置的默认头像
            this.pic = res.data.data.avatar.replace(/public/, baseUrl);
          } else {
          //请求失败使用默认的头头像
            this.pic = logoPic;
          }
        }
      });
    }

9.初始化页面完成后获取头像

 mounted() {
    //修改头像后已经获取到数据存到本地然后判断与登陆的用户存的信息对比 相同就修改默认头像
    //如果没有上传头像就用本地的 本地没有就去数据库获取  都没有就用默认的
	//如果本地存有数据，就是有修改头像 ,没有就去获取   
	if (localStorage.users) { 
      var users = JSON.parse(localStorage.users);
      //如果修改头像后存入的mobile 与登陆存入的mobile一样那就可以直接用修改存入的path ,否则就去发送请求
      if (users.usermobile === localStorage.usermobile) {
        this.pic = users.picpath;
      } else {
        this.getAvatar();
      }
    } else {
      this.getAvatar();
    }
  }

• 学生党，个人笔记