使用 VueJS 为用户显示图像 EXIF

Question

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

显示信息

标签中的用户？ 这是我的代码：

<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 指南的概念。

"Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive."

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

额外，下次包含你的html部分有时错误会在那里。

从 vue 开始的一个额外的常见问题是 this 的使用，exif 中的 this 与 vue 中的 this 不一样。绕过“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>

Here the example you use from jsfiddle fixed