vue中input上传图片与预览（this指向问题）

<img :src="formData.url" class="photoUpload_img" v-if="formData.url"> <input type="file" @change="changeImg" class="choosePhoto_upload"> changeImg () { var file = event.target.files[0] this.uploadName = file.name var reader = new FileReader() // 转base64 reader.onload = function (e) { this.formData.url = e.target.result console.log(_this.formData.url) } reader.readAsDataURL(file) },

这种情况只能拿到图片的name，url是拿不到的，报错： 修改成：

changeImg () { var _this = this var file = event.target.files[0] _this.uploadName = file.name var reader = new FileReader() // 转base64 reader.onload = function (e) { _this.formData.url = e.target.result } reader.readAsDataURL(file) },

补充另一种更简单的方法：

// 浏览本地图片 changeImg () { var file = event.target.files[0] this.uploadName = file.name var reader = new FileReader() // 转base64 reader.onload = (e) => { this.formData.url = e.target.result } reader.readAsDataURL(file) // 调用上传方法 this.getUpLoadImg (file) },

使用箭头函数，明确this指向！

你若细心，生活处处皆可爱！