时间戳

首页 > 解决方案 > Vue.js + TS 对象在文件输入时可能为“空”

javascript - Vue.js + TS 对象在文件输入时可能为“空”

问题描述

我试图在文件输入上传文件后捕获一个事件。

JS代码：

fileSelected(e: Event) {
    if ((<HTMLInputElement>e.target).files !== null && (<HTMLInputElement>e.target).files[0] !== null) {
        this.file = (<HTMLInputElement>e.target).files[0];
    }
}

我的文件变量被定义为null。我想选择文件的第一个元素，但出现错误：

对象可能为空

我找到了一个解决方案，您首先必须检查它是否不为空，但是我在 if 语句本身上遇到了同样的错误。有任何想法吗？

标签： javascripttypescriptvue.jsvuejs2

解决方案

那是因为 TypeScript 无法在您共享的代码中执行类型缩小。如果您 (1) 将它们分配给变量并 (2) 在逻辑中添加保护子句以强制执行非空值检查，则应该可以解决问题：

fileSelected(e: Event) {
  const target = e.target as HTMLInputElement;
  const files = target.files;

  // Guard clause to catch cases where `files` or `files[0]` is falsy (null included)
  if (!files || !files[0])
    return;

  // At this point, both `files` and `files[0]` will be non-null
  // And `files` will have an inferred type of `FilesList` instead of `FilesList | null`
  this.file = files[0];
}

推荐阅读