Question

我想创建一个遵循以下界面的对象

interface FileList {
  getter File? item(unsigned long index);
  readonly attribute unsigned long length;
};

最终，我想将该对象分配给files input type=file元素的HTML属性

到目前为止我写的代码是

let file1 = new File(["foo"],"foo.txt");
    let fl:FileList = {
      item: function(index){
        file1;
      },
      length: 1
    } as FileList;
...
imageInputNE.files = fl ;

但是我遇到错误TypeError: Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'.

我也尝试创建一个typescript类，但这也不起作用

class MyFileList{
  file:File;
  length=1;
  constructor(file:File){
    this.file = file;
  }

  item(index):File|null {
    return this.file;
  }

}

...
let file1 = new File(["foo"],"foo.txt");
    let fl:MyFileList = new MyFileList(file1);
imageInputNE.files = fl ;

如何创建FileList类型的对象？

Answer 1

您没有满足标准FileList的一切。

如果在.files上按F12键，将转到标准的lib.dom.d.ts文件，该文件将显示：

files: FileList | null;

从那里跟踪FileList将显示：

interface File extends Blob {
    readonly lastModified: number;
    readonly name: string;
}

declare var File: {
    prototype: File;
    new(fileBits: BlobPart[], fileName: string, options?: FilePropertyBag): File;
};

interface FileList {
    readonly length: number;
    item(index: number): File | null;
    [index: number]: File;
}

declare var FileList: {
    prototype: FileList;
    new(): FileList;
};

不仅要实现以上所有功能都太复杂，而且我认为现实中的属性（略微忽略TypeScript）是只读的。

该属性是用户从自己的计算机中选择的属性。从您自己的计算机上选择文件在安全方面没有意义。

当然，您总是可以将必须拥有的对象强制转换为any并尝试查看运行时会发生什么。

如果这样做的目的是让用户界面的其他部分显示正在使用的文件，并且希望该部分显示额外的信息，则建议您修改使用input.files的部分，并使其也使用您的其他内容，而不是尝试操纵属性本身。

无法创建FileList类型的对象（鸭式输入）

1 个答案: