Question

我正在使用 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”。

知道如何去做吗？

更新

发布此内容后，我找到了一个有效的解决方案。我对这个解决方案犹豫不决，因为它看起来太简单了。

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

// 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);
    })
},

Answer 1

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

我的解决方案是将 Uppy 实例化从箭头函数更改为常规函数。我相信这会导致 this 指代全局实例，但我对 this 没有深入的了解，所以请持保留态度。

我改变了这个：

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

为此：

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

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

1 个答案: