页面很简单就是一个上传按钮和一张图片

  1. <div class="wrap">
  2.     <input type="file" ref="test" @change="demo" />
  3.     <img v-if="imgPath" v-bind:src="imgPath"/>
  4. </div>

这里我们用图片blob转换成base64进行预览，写法如下，看似没有啥问题，但是图片就是显示不出来。

  1. <script type="text/javascript">
  2.     var vm = new Vue({
  3.         el: '.wrap',
  4.         data : {
  5.             'imgPath': ''
  6.         },
  7.         methods: {
  8.             demo: function() {
  9.                 var file = this.$refs.test.files[0];
  10.                 var reader = new FileReader();
  11.                 reader.readAsDataURL(file);
  12.                 reader.onload = function(e) {
  13.                     var str = reader.result;
  14.                     var urlDecoded = decodeURIComponent(str);
  15.                     this.imgPath = urlDecoded;
  16.                 }
  17.             }
  18.         }
  19.     })
  20. </script>

我们知道FileReader对象的onload方法是异步加载的，所有我们不能在onload方法里面直接对data进行赋值。这个时候我们需要先把this赋给一个变量，然后进行再引用，方法如下

  1. <script type="text/javascript">
  2.     var vm = new Vue({
  3.         el: '.wrap',
  4.         data: {
  5.             'imgPath': ''
  6.         },
  7.         methods: {
  8.             demo: function() {
  9.                 /****先将this赋给一个变量****/
  10.                 var _this = this;
  11.                 var file = this.$refs.test.files[0];
  12.                 var reader = new FileReader();
  13.                 reader.readAsDataURL(file);
  14.                 reader.onload = function(e) {
  15.                     var str = reader.result;
  16.                     var urlDecoded = decodeURIComponent(str);
  17.                     /****对变量进行赋值****/
  18.                     _this.imgPath = urlDecoded;
  19.                 }
  20.             }
  21.         }
  22.     })
  23. </script>

最后看一下图片预览的效果