vue开发简单上传图片功能

vue简单的上传个图片的功能，主要代码：

<template>
<div class="plan_list">
        <div class="plan_name Upload_name">企业logo</div>
        <div class='Upload'>
          <input type="file" name="pclogo" id="xdaTanFileImg" @change="xmTanUploadImg()" ref='box' accept="image/*">
          <img  src="../../static/img/Authentication/shxy.jpg" class="img-circle img-thumbnail img-responsive" id="avarimgs">
        </div>
      </div>
</template>


<script>
export default {
  name: "feedShopping",
  data() {
    return {}
  },
    
  methods: {

//上传图片
    xmTanUploadImg(){

      var obj=this.$refs.box;//获取元素的dom
      var file = obj.files[0];               
      var reader = new FileReader();
      reader.onload = function (e) {

        var img = document.getElementById("avarimgs");//获取图片id

        img.src = e.target.result;//给图片src路径赋值

        //重要：这里可以把获取的src路径的 base64 格式的图片传给后端即可
      }
      
      reader.readAsDataURL(file)
    },
}
<script>



<style scoped>
#avarimgs,#xdaTanFileImg{
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 0.1rem;
  margin: 0.1rem 0;
  float: right;
}
#xdaTanFileImg{
  position: absolute;
  top: 0;
  right: 0;
  opacity: 0;
}
.Upload_name{
  line-height: 1rem;
}

</style>

参照之前发布的  jquery上传图片代码更改 完整代码：https://blog.csdn.net/qq_42221334/article/details/84827369

 

 

 

更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1