将base64字符串绑定到src图像不适用于vue

Question

我正在尝试将base64数据绑定到img属性的src。在将新值设置为img vue属性之前，代码将正常工作

我建造了这个

new Vue({

el: '#app',
data: {
  img: ''
},

methods: {
  upload: function( event ){
    let file = event.target.files[0];
				if( !file ) {
					return;
				} else {
					let imageType = /image.*/;
					if ( !file.type.match( imageType ) ) {
						return;	
					} else {
						let reader = new FileReader();

						reader.onload = function( e ) {
							this.img = reader.result;
						}

						reader.readAsDataURL(file);
					}
				}
  }
}

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  
  <img :src="img" width="200" height="200" />
  <input type="file" @change="upload">
</div>

不起作用，base64设置为OK，但未渲染到图像。

我的代码有什么问题？

Answer 1

this上下文在reader.onload内部进行了更改。

只需将this存储在这样的临时变量中：

[...]
const that = this;
reader.onload = function( e ) {
    that.img = reader.result;
}
[...]

示例：

new Vue({

el: '#app',
data: {
  img: ''
},

methods: {
  upload: function( event ){
    let file = event.target.files[0];
				if( !file ) {
					return;
				} else {
					let imageType = /image.*/;
					if ( !file.type.match( imageType ) ) {
						return;	
					} else {
						let reader = new FileReader();

						const that = this;
						reader.onload = function( e ) {
							that.img = reader.result;
						}

						reader.readAsDataURL(file);
					}
				}
  }
}

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  
  <img :src="img" width="200" height="200" />
  <input type="file" @change="upload">
</div>