将 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 设置正常，但未渲染到图像。

我的代码有什么问题？

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>