0

根据 Packt 的书“Complete Vue.js 2 Web Development (Chapter 4)”，我尝试体验了 Dropbox API。由于最近不推荐使用 include_media_info，因此我尝试将示例代码改编为 dropbox().filesGetMetadata() 以查询图像的元数据。

javascript是这样的：

Vue.component("dropbox-viewer", {
    template: "#dropbox-viewer-template",

    data() {
        return {
            accessToken:
                "XXXXXX",
            structure: [],
        }
    },

    methods: {
        dropbox() {
            return new Dropbox.Dropbox({
                accessToken: this.accessToken,
                fetch: fetch,
            })
        },

        getFolderStructure(path) {
            this.dropbox()
                .filesListFolder({ path: path })
                .then((response) => {
                    console.log(response.entries)
                    this.structure = response.entries
                })
                .catch((error) => {
                    console.log(error)
                })
        },

        getDimensions(path) {
            let dimensions = ""
            this.dropbox()
                .filesGetMetadata({ path: path, include_media_info: true })
                .then((response) => {
                    if ("media_info" in response) {
                        dimensions = response.media_info.metadata.dimensions
                        console.log(dimensions)
                        console.log(typeof dimensions)
                        return dimensions
                    }
                })
                .catch((error) => {
                    console.log(error)
                })
        },
    },

    created() {
        this.getFolderStructure("")
    },
})

相关的HTML如下：

<div>
   <h1>Dropbox Viewer</h1>
   <li v-for="entry in structure">
      <span>{{ entry[".tag"] }}</span>
      <strong>{{ entry.name }}</strong>
      <span v-if="entry.size"> - {{ entry.size }}</span>
      <span v-if="entry['.tag'] === 'file'">
         {{ entry.path_lower }}
         {{ typeof getDimensions(entry.path_lower) }}
      </span>
   </li>
</div>

从 js 中的 console.log(dimensions) 中，我注意到维度是一个具有高度和宽度的对象。控制台输出

但是，它在 HTML 中呈现时是未定义的。 呈现的 HTML

我不确定我是否对 Vue 方法的返回值有任何误解。所以我想征求你的意见。非常感谢您提前。

4

0 回答 0