如何从 Uppy 的回调事件中访问“this”答案

【问题标题】：How to access "this" from Uppy's callback event如何从 Uppy 的回调事件中访问“this”
【发布时间】：2021-04-23 15:44:15
【问题描述】：

我正在使用 Uppy Vue 组件库，并按照 docs，通过将 Uppy 添加为计算属性来初始化它。

computed: {
    uppy: () => new Uppy({
        logger: Uppy.debugLogger
    }).use(AwsS3Multipart, {
        limit: 4,
        companionUrl: '/',
    }).on('complete', (result) => {
        this.testing = 'success';
        console.log('successful files:', result.successful);
        console.log('failed files:', result.failed);
    }),
}

我现在正在尝试使用 Uppy 的 complete event 更新我的 Vue 组件的数据，但未定义“this”。我不太确定如何从这里访问“this”。

知道怎么做吗？

更新

发布后，我找到了一个可行的解决方案。我对这个解决方案犹豫不决，因为它似乎太容易了。

如果没有人提供更好的解决方案，我会添加这个作为答案。

// Uppy Instance
uppy: function() {
    return new Uppy({
        logger: Uppy.debugLogger
    }).use(AwsS3Multipart, {
        limit: 4,
        companionUrl: '/',
    }).on('complete', (result) => {
        this.testing = 'success';
        console.log('successful files:', result.successful);
        console.log('failed files:', result.failed);
    })
},

【问题讨论】：

似乎正确。如果我们想要访问这个 Vue 实例，就需要一个函数。最初的示例是一个箭头函数，它不提供对 Vue 实例的访问。

标签： vue.js this uppy

【解决方案1】：

通过遵循 Uppy 文档并使用箭头函数实例化 Uppy 实例，this 似乎不再指代 Vue。这使得访问this.method() 或this.variable 等不再有效。

我的解决方案是将 Uppy 实例化从箭头函数更改为常规函数。我相信这会导致this 引用全局实例，但我对this 没有扎实的理解，所以请相信我所说的。

我改变了这个：

computed: {
    uppy: () => new Uppy()
}

到这里：

computed: {
    uppy: function() { return new Uppy() }
}

【讨论】：