如何使用 filepond 获取 exifdata（如 gps）？

Question

我正在尝试使用 filepond 进行作业，但我无法从照片中获取 exifdata。

例如，如我所料

File {name: "KakaoTalk_20210727_153219119.jpg", lastModified: 1627367574529, lastModifiedDate: Tue Jul 27 2021 15:32:54 GMT+0900 (Korean Standard Time), webkitRelativePath: "", size: 2319798, …}
exifdata: {ImageWidth: 4000, ImageHeight: 2252, Make: "samsung", Model: "SM-G988N", Orientation: 1, …}
iptcdata: {}
lastModified: 1627367574529
lastModifiedDate: Tue Jul 27 2021 15:32:54 GMT+0900 (Korean Standard Time) {}
name: "KakaoTalk_20210727_153219119.jpg"
size: 2319798
type: "image/jpeg"
webkitRelativePath: ""

我想用这样的 filepond 代码获取这样的 exifdata，但我找不到它:(

file: File
lastModified: 1627367574529
lastModifiedDate: Tue Jul 27 2021 15:32:54 GMT+0900 (Korean Standard Time) {}
name: "KakaoTalk_20210727_153219119.jpg"
size: 2319798
type: "image/jpeg"
webkitRelativePath: ""
_relativePath: ""

我的任务确实需要 gps 数据，我怎么才能得到它？

这是 Vue-filepond 代码。

<template>
  <div id="test">
    <br>
    <br>
    <br>
    <br>
    <br>
    <file-pond
      name="test"
      ref="pond"
      allowImageExifOrientation = "true"
      label-idle="Drop files here..."
      allowprocess="false"
      v-bind:allow-multiple="true"
      accepted-file-types="image/jpeg, image/png"
      :server="myServer"
      instantUpload ="false"
      v-bind:files="myFiles"
      v-on:init="handleFilePondInit"
      imageTransformOutputStripImageHead = "false"
      allowImagePreview="true"
      imagePreviewHeight="300px"
      @initfile="oninitfile()"
      @updatefiles="FilePondUpdateFiles"
    />
    <br>
    <p style="text-align:center">hi</p>
    <div v-for="imageFile in imageFiles" :key="imageFile.name" style="text-align:center;">
      <img :src="imageFile.src" alt="" style="width: 200px">
    </div>

  </div>
</template>

  methods: {
    handleFilePondInit: function () {
      console.log("FilePond has initialized");
      // FilePond instance methods are available on `this.$refs.pond`
      this.$refs.pond.getFiles();
      console.log(this.$refs.pond.getFiles())
    },

    // 파일 staging시
    oninitfile() {
      console.log("onInit!")
    },

    FilePondUpdateFiles(files) {
      console.log("기본적인 이미지 검색 방식", this.$refs['pond'].file)
      console.log(files)
      console.log("onAdd!")

      this.imageFiles = files

      console.log("총 사진 데이터", this.imageFiles)
      
    }
  },

感谢您的阅读和帮助，祝您有愉快的一天！

Answer 1

FilePond 不会读取 EXIF 数据，它只会更正方向 header 参数，以便图像可以在旧版浏览器上正确定位。

您可以使用 Exif-JS 结合 FilePond 读取 EXIF 数据。 https://github.com/exif-js/exif-js

使用beforeAddFile钩子读取EXIF数据并将其添加到文件项中。

这是一个简单的 JavaScript 示例，应该可以直接移植到 Vue。

FilePond.create({

  beforeAddFile: (fileItem) => new Promise(resolve => {

    const success = EXIF.getData(fileItem.file, () => {

        fileItem.setMetadata('exifdata', EXIF.getAllTags())

        // Added EXIF data to file item, we're done
        resolve(true);

    })

    // Can't read EXIF data, don't add file
    if (!success) resolve(false);

  })

})

如何使用 filepond 获取 exifdata（如 gps）？

how can I fetch exifdata(like gps) with filepond?

filepond