如何在 Vue 组件中的方法中正确使用方法?
2018-10-28
398
我正在使用 exifjs 从图像中获取 GPS 数据。 我想做的是将纬度和经度变量转换为十进制变量。像这样:
<template lang="html">
<div class="upload-wrap">
<button class="btn">Kies een foto</button>
<input ref="fileinput" @change="onChange" id="file-input" type="file" accept="image/jpeg"/>
</div>
</template>
<script>
import EXIF from '../../node_modules/exif-js/exif'
export default {
methods: {
toDecimal(number) {
return number[0].numerator + number[1].numerator /
(60 * number[1].denominator) + number[2].numerator / (3600 * number[2].denominator);
},
onChange(image) {
var input = this.$refs.fileinput
if (image) {
EXIF.getData(input.files[0], function() {
var lat = EXIF.getTag(this, 'GPSLatitude');
var long = EXIF.getTag(this, 'GPSLongitude');
if (lat && long) {
var lat_dec = toDecimal(lat);
var long_dec = toDecimal(long);
// eslint-disable-next-line
console.log(lat_dec, long_dec);
}
else {
// No metadata found
clearFileInput(input);
alert("Geen GPS data gevonden in afbeelding '" + input.files[0].name + "'.");
}
})
} else {
// eslint-disable-next-line
console.log(`Geen afbeelding?`);
}
},
// Clear file input if there's no exif data
clearFileInput(ctrl) {
ctrl.value = null;
}
}
}
</script>
但我收到以下错误:
ReferenceError: toDecimal is not defined
我使用的语法不正确还是我忘记了什么?
编辑:我尝试使用
this.toDecimal(lat);
,但这导致
TypeError:this.toDecimal 不是函数
1个回答
您可以调用
this.toDecimal
,但在这种情况下,回调中的
this
不是 Vue 实例。您可以使用箭头函数或使用
var self = this
的小技巧。
onChange(image) {
var input = this.$refs.fileinput
var self = this;
if (image) {
EXIF.getData(input.files[0], function() {
var lat = EXIF.getTag(this, 'GPSLatitude');
var long = EXIF.getTag(this, 'GPSLongitude');
if (lat && long) {
var lat_dec = self.toDecimal(lat);
var long_dec = self.toDecimal(long);
// eslint-disable-next-line
console.log(lat_dec, long_dec);
} else {
// No metadata found
clearFileInput(input);
alert("Geen GPS data gevonden in afbeelding '" + input.files[0].name + "'.");
}
})
} else {
// eslint-disable-next-line
console.log(`Geen afbeelding?`);
}
}
ittus
2018-10-28