vue3+simple-uploader.js组件上传文件不能被删除

vue3+simple-uploader.js组件上传文件不能被删除

前一段时间一直在研究大文件上传组件simple-uploader.js，在vue2中是没有问题，迁移到vue3的发现上传的文件不能被删除。查了很多资料没有发现想要的东西~~~~~

后来通过代码定位发现调用file.cancle()是文件也清空了，但在File.vue中uploader对象没有监听到没有变化。然后想将new Uploader()对象变为响应式对象，在这过程中遇到一点点小麻烦。

开始想使用reactive实现的，发现在打包的时候报：Type 'null' is not assignable to type 'Ref'.

通过chartGPT回答

在 Vue 中，如果你遇到提示 "Type 'null' is not assignable to type 'Ref'" 的类型错误，通常是因为你试图将 null 赋值给一个被 TypeScript 推断为 Ref 类型的变量。在 TypeScript 中，如果你确定一个 ref 可以被赋为 null，你需要在声明 ref 的时候指定其类型。比如说，你可以这样声明一个 ref，它可以持有 Uploader 类型的对象，也可以是 null：

const uploader: Ref<Uploader | null> = ref(null);

通过将类型定义为 Ref<Uploader | null>，你告诉 TypeScript，这个 ref 可以引用 Uploader 的实例，或者是 null。在初始化时使用 ref(null) 是完全可以接受的，并且在之后可以将其设置为非 null 的值。

这样做的好处是你的类型定义更加明确和安全，同时为 null 赋值不会抛出任何类型错误。

实现代码：

增加uploader.ts文件

import { ref } from 'vue'
// @ts-ignore
import Uploader from 'simple-uploader.js'

export function useUploader(
  options: any,
  autoStart: boolean,
  fileStatusText: any
) {
  const uploader = ref<Uploader | null>(null)
  options.initialPaused = !autoStart
  uploader.value = new Uploader(options)
  uploader.value.fileStatusText = fileStatusText

  // 使用toRefs确保响应性
  return { uploader }
}

在uploader.vue文件中

// 创建update对象
let { uploader } = useUploader(
  props.options,
  props.autoStart,
  props.fileStatusText
)

希望对大家有帮助，有不对的地方请大家反馈 谢谢！