显示图像EXIF为用户使用VueJS

Question

我使用 Exif.js 和 VueJS 进行项目。 但我有问题。 当我想在屏幕上显示图像信息时，它不起作用。 但它适用于浏览器控制台。 如何在

html 中为用户显示带有标记的信息？ 这是我的代码：

<script>
const app = new Vue({
el: '#app',
data: {
message: 'Vue exif meta info getter',
DateImage: "DateTimeDigitized"
},
components: {
'picture-input': PictureInput
},
methods: {
onChange(image) {
console.log('onChange!')
if (image) {
EXIF.getData(this.$refs.pictureInput.file, function () {
console.log('image info', this)
console.log('exif data', this.exifdata)
console.log("date image jadid : " + this.DateImage);
})
} else {
console.log(`it's not image`)
}
},
getEI() {
var old = console.log;
var logger = document.getElementById('log');
console.log = function (message) {
if (typeof message == 'object') {
logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
} else {
logger.innerHTML += message + '<br />';
}
}
}
}
})
</script>

Answer 1

您在数据和反应性方面存在问题。这里是 vue 指南中的概念。

由于现代JavaScript的局限性(以及Object.observe的放弃(，Vue无法检测到属性的添加或删除。由于 Vue 在实例初始化期间执行 getter/setter 转换过程，因此数据对象中必须存在一个属性，以便 Vue 转换它并使其具有响应性。

意味着数据应该是可重用性的函数，您需要声明一个变量来应用 exif 值并能够在屏幕上显示它们更新

另外，下次包含您的html部分时，有时会出现错误。

从 vue 开始的一个额外的常见问题是使用它，嗯，这个内部 exif 它与 vue 中的这个不一样。绕过"this"问题的一种简单方法是将 vue this 保存在一个临时变量中(让 vm = this(并在 exif 代码中使用它们。

就像那样：

<template>
<!-- exifs is an object, you can print direct a value 
if you know their key (exifs.Name) or you can iterate 
with v-for and show all the values -->
<p v-for="ex in exifs">
{{ex}}
</p>
</template>

<script>
const app = new Vue({
el: '#app',
data() {
return {
message: 'Vue exif meta info getter',
DateImage: "DateTimeDigitized",
exifs: null
}
},
components: {
'picture-input': PictureInput
},
methods: {
onChange(image) {
console.log('onChange!')
if (image) {
let vm = this
EXIF.getData(this.$refs.pictureInput.file, function () {
vm.exifs = this
})
} else {
console.log(`it's not image`)
}
},
getEI() {
var old = console.log;
var logger = document.getElementById('log');
console.log = function (message) {
if (typeof message == 'object') {
logger.innerHTML += (JSON && JSON.stringify ? JSON.stringify(message) : message) + '<br />';
} else {
logger.innerHTML += message + '<br />';
}
}
}
}
})
</script>

这里你从jsfiddle使用的例子固定