2

我正在使用 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 的完整事件来更新我的 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);
    })
},
4

1 回答 1

1

通过遵循 Uppy 文档并使用箭头函数实例化 Uppy 实例，this似乎不再引用 Vue。这使得访问this.method(), orthis.variable等​​不再起作用。

我的解决方案是将 Uppy 实例化从箭头函数更改为常规函数。我相信这会导致this引用全局实例，但我对 的理解并不扎实this，因此请对我所说的持保留态度。

我改变了这个：

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

对此：

computed: {
    uppy: function() { return new Uppy() }
}
于 2021-04-27T14:56:44.653 回答