使用input上传头像

上传头像

<template>
  <div>
    <el-card>
      <div class="material">更换头像</div>
      <!-- 上传单个头像 -->
      <div v-if="!avatar" class="image-display">
        <span class="image-font">请选择头像</span>
      </div>
      <div v-else class="image-display">
        <span class="image-font">
          <img :src="avatar" alt="">
        </span>
      </div>
      <!-- 被触发的input -->
      <input type="file" accept="image/*" style="display:none" multiple="multiple" ref="iptRef" @change="onFile">
        <el-button type="primary" size="small" @click="chooseImg">
          <i class="el-icon-upload el-icon-plus"></i>
          选择图片
        </el-button>
        <el-button type="success" size="small" @click="onUpload">
          <i class="el-icon-upload el-icon--right"></i>
          上传头像
        </el-button>
    </el-card>
  </div>
</template>

<script>
import {avataristerAPI} from '../../api/index'
export default {
  data(){
    return{
      avatar: '',
    }
  },
  methods:{
    // 选择图片事件
    chooseImg(){
      // 触发input原生事件，默认弹出窗口
      this.$refs.iptRef.click()
    },
    // 选择图片确认 
    onFile(e){    //原生事件对象，获取选择的图片信息
      const files = e.target.files  //获取用户选择的数组
      if (files.length === 0) {
        // 判断是否数组长度<=0,如何小于0,就选择关闭窗口
      }else{
        // 当前选择项，只能选择一个，想选择多个添加：在input上加multiple属性

        // 方法一
        // 上传，内存临时地址，显示头像 (不能传给后端)
        // 上传单个头像
        // 上传，内存临时地址，显示头像
        // avatar变量是个字符串
        // this.avatar = URL.createObjectURL(files[0])


       console.log(files);

        // 方法二
        // 将文件转base64字符串(可以发给后台)
        const fr = new FileReader()
        // 传入文件对象开始阅读
        fr.readAsDataURL(files[0])
        fr.onload = (e) =>{  //onload: 等待把文件读成base64字符串后触发onload事件
          // e.target.result 就是转成后的base64文件
          this.avatar = e.target.result
        }
        console.log(this.avatar);
      }
    },

    // 上传头像
    onUpload(){
      // 参数要求：头像base64字符串
      avataristerAPI({'avatar':this.avatar}).then((res)=>{
        console.log(res.data);
          if (res.data.code !== 0 ) {
            this.$message.error('上传头像失败')
          }else{
            this.$message.success('上传头像成功')
          }
        })
    }
  }
};
</script>

<style lang = "less" scoped>
.material {
  padding: 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #cde;
  font-weight: 700;
}
.image-display{
  width: 250px;
  height: 250px;
  text-align: center;
  line-height: 250px;
  background: #ccc;
  margin-bottom: 20px;
  margin-right: 20px;
  .image-font{
    font-size: 24px;
    color: antiquewhite;
    img{
      width: 100%;
      height: 100%;
    }
  }
}
.box-image{
  display: flex;
}
</style>