javascript - Vue组件中如何正确使用方法中的方法?
问题描述
我正在使用 exifjs 从图像中获取 GPS 数据。我想要做的是将 lat 和 long 变量转换为十进制变量。像这样:
<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 is not a function
解决方案
您可以调用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?`);
}
}
推荐阅读
- django - 显示 Django 默认图像
- javascript - Chart.js 散点图数据将起点和终点连接在一起
- python-3.x - spark中的数据类型转换
- c++ - c++ 中这段代码的长度和 this->length 是否相同?
- amazon-web-services - Amazon Textract、Elastic Beanstalk -assumed-role/aws-elasticbeanstalk-ec2-role/... 无权执行 textract:AnalyzeDocument
- jsf - 无法访问 primefaces 中的后缀或枚举值
嗨,我目前正在使用 primefaces 开发一个 java 项目 (jsf),并且我正在使用枚举,但我无法使用 primefaces 从视图中访问它的值。我已经通过从 Bean 创建一个 getter 并访问枚举值暂时解决了这个问题,但它应该默认使用 allSuffix = "ALL_ENUM_VALU
- ethereum - 执行 TX 特定 block.timestamp
- python - 如何使用 Python 3.8.5 安装 vtkplotter?
- java - java-处理浮点舍入错误,如何保持弧度合理
- python - 重新缩放拼接图像中的边界框注释