vue项目切换用户头像的写法

vue项目切换用户头像的写法

vue程序的头像的切换，今天别人给我讲了下我今天来试了一下还不错，进行总结

首先是找清楚需要用的接口

1，https://www.365msmk.com/api/app/public/img向服务器上传图片

2，https://www.365msmk.com/api/app/user 把服务器图片上传到头像

就这两个就行了

接下来就是步骤的实现

主要用到的其实是表单输入中的file

<template>
  <div id="app">
    <img :src="img" alt style="width: 80px;" />
    <br />
    <label>
      手机拍摄 //这里的camera就是调用手机相机的功能 
      <input type="file" accept="image/*" capture="camera" @change="paishe($event)" />
    </label>
    <br />
    <br />
    <label>
      相册上传 //去掉capture就没有手机相机功能只提供上传图片
      <input type="file" accept="image/*" @change="paishe($event)" />
    </label>
  </div>
</template>

<script>
export default {
  data() {
    return {
      img: "",
    };
  },
  //页面加载的时候获取一下用户信息
  mounted() {
    this.$http.get("https://www.365msmk.com/api/app/userInfo").then((res) => {
      this.img = res.data.data.avatar;
    });
  },
  methods: {
    paishe(e) {//这是一个change事件参数是e,e中的target.files中包含了图片的主要信息，上传时间之类的
      console.log(e);
      //因为这里的上传接口是利用 FromData来实现传参的
      //所以我们这里初始化了一个FromData
      let formData = new FormData();
      formData.append("file", e.target.files[0]);
      //调用上传图片接口上传照片
      this.$http
      //将formData作为参数传给服务器
        .post("https://www.365msmk.com/api/app/public/img", formData)
        .then((res) => {
          console.log(res);
          if (res.data.code === 200) {
          //成功拿到图片在服务器的数据后就可以调用设置头像的接口了
            //设置头像接口
            this.$http
              .put("https://www.365msmk.com/api/app/user", {
                avatar: res.data.data.path,
              })
              .then((ress) => {
                console.log("图像路径", ress);
                this.img = res.data.data.avatar;
              });
          }
        });
    },
  },
  filters: {},
  watch: {},
};
</script>
**

vue路由传值

vue的路由传值有两种方式

params

this.$router.push({
  path:"/地址",
  params:{
    参数名:"参数值"
  }
})
接受
this.$route.params."参数值"
12345678

params的话传参刷新页面数据会消失不会保存

query

this.$router.push({
  path:"/地址",
  params:{
    参数名:"参数值"
  }
})

接受
this.$route.query."参数值"
123456789

query的话刷新页面数据也不会丢失

flex 最后一行左对齐

最近项目布局上要求item两端对齐，而且最后一行在列不满的情况下要求左对齐，使用flex的**justify-content: space-between;**实现时发现最后一行不能左对齐，而是两端对齐方式，下图不是项目上想要的效果（不使用flex也可以实现，本文仅讨论使用flex实现）

felx最后一行对齐的话可以用空白div来填充

还可以用：:after（适用于每行列数确定的场景）

.box:after {
    content: "";
    flex: auto;
 }

Js数组中常用的方法

push()

像数组的末尾添加，返回的是添加后的数组的长度，会改变原来的数组

var a = [a]
var b= a.push(b)

结果：[a,b]

pop()

删除数组尾部的元素，改变原来数组

var a = [a,b]
var b= a.pop()

结果：[a]

unshift()

数组前添加一个元素，改变原来数组

var a = [a]
var b= a.unshift(b)

结果：[b,a]

shift()

删除数组中的首个元素，改变原来数组

var a = [a,b]
var b= a.shift()

结果：[b]

splice()

方法用于添加或删除数组中的元素，改变原来的数组

var a = [a,b]
var b= a.splice(0,1)
从0开始删除一个
结果：[b]

var a = [a,b]
var b= a.splice(0,1,c,d)
移出a,并且添加c,d
结果：[b,c,d]