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

  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>

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