代码之家  ›  专栏  ›  技术社区  ›  Manu Chadha

无法创建FileList类型的对象(duck类型)

  •  0
  • Manu Chadha  · 技术社区  · 6 年前

    我想创建一个遵循以下接口的对象

    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 ?

    1 回复  |  直到 6 年前
        1
  •  0
  •   Meligy    6 年前

    你不可能拥有所有符合标准的东西 FileList .

    如果按F12 .files lib.dom.d.ts 文件,将显示:

    files: FileList | null;
    

    跟踪 文件列表 从那里将显示:

    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 ,并让它也使用您的其他东西,而不是试图操纵属性本身。