Contract/src/views/Uploader.vue

<template>
  <div class="loader-ctnr">
    <div class="loader-box">
      <img src="../assets/img/camera.png" id="pic">
    </div>
    <p>{{msg}}</p>
  </div>
</template>
<script type="text/javascript">
  export default{
    props:["msg"],
    methods:{
      upLoadImg:function(obj){
        var file = obj.files[0];
        console.log(obj);console.log(file);
        console.log("file.size = " + file.size);  //file.size 单位为byte
        var reader = new FileReader();
        //读取文件过程方法
        reader.onloadstart = function (e) {
            console.log("开始读取....");
        }
        reader.onprogress = function (e) {
            console.log("正在读取中....");
        }
        reader.onabort = function (e) {
            console.log("中断读取....");
        }
        reader.onerror = function (e) {
            console.log("读取异常....");
        }
        reader.onload = function (e) {
            console.log("成功读取....");

          var img = document.getElementById("pic");
          img.src = e.target.result;
          //或者 img.src = this.result;  //e.target == this
        }

        reader.readAsDataURL(file)
      }
    }
  }
</script>
<style scoped>
  .loader-ctnr{
    display: inline-block;
    padding-top: 0.266525rem;
    padding-bottom: 0.333156rem;
    .loader-box{
      width: 1.865672rem;
      height: 1.865672rem;
      margin: 0 auto;
      border:2px solid #60c0ff;
      border-radius: 10px;
      line-height: 2.265672rem;
      img{
        width: 0.746269rem;
      }
    }
    p{
      font-size: 0.373134rem;
      margin-top: 0.199893rem;
    }
  }
</style>