如何使用disconnect()关闭Uppy JS实例——Stimulus实践

问题核心是你在connect()里定义的uppy是局部变量，disconnect()根本访问不到它，所以才会报uppy is nil or undefined的错误。

解决方法很简单，把uppy挂载为控制器实例的属性，让两个方法都能访问到同一个实例：

import { Controller } from "@hotwired/stimulus"
import Uppy from "@uppy/core"

export default class extends Controller {
  connect() {
    // 把uppy赋值给this.uppy，成为控制器实例的属性
    this.uppy = new Uppy()
    // 这里可以继续添加Uppy的配置、插件等
  }

  disconnect() {
    // 先判断实例是否存在，避免意外报错
    if (this.uppy) {
      this.uppy.close()
      // 可选：如果需要彻底清理实例，还可以调用destroy方法
      this.uppy.destroy()
      // 解除引用，帮助垃圾回收
      this.uppy = null
    }
  }
}

这样修改后，当控制器断开（比如页面跳转、元素被移除）时，就能正确调用原始Uppy实例的close()方法，避免返回页面时出现重复加载的问题。

内容的提问来源于stack exchange，提问作者Kobius