ngx-file-drop - `openFileSelector()` 似乎没有产生可用的 File 对象

问题描述

我正在尝试使用 ngx-file-drop module 使文件上传工作。

这是我目前所拥有的：

<ngx-file-drop (onFileDrop)="dropped($event)" [showbrowseBtn]="true">
    <ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
        <div (click)="openFileSelector()" class="file-drop-content">
            <h2>Drag File Here</h2>
            <span>or click to browse</span>
        </div>
    </ng-template>
</ngx-file-drop>

它目前适用于拖放的文件，但不适用于“点击浏览”文件。它允许我浏览并选择一个文件，但它发回的 FileEntry 对象缺少 filesystem 和 fullPath 属性：

存在于拖放版本中：

使点击浏览版本无法使用（afact）。

我想我在某处丢失了一些配置。我对这个模块不是很熟悉，因为我只是从别人那里接手这个项目。

有人知道什么会导致拖放文件与点击浏览文件不同吗？

解决方法

我发现缺少 filesystem/filePath 属性并不重要。

做重要的是，在“点击浏览”场景中，ctx-file-drop.js 创建了一个“假”FileEntry 对象，其中 file() 方法只是调用回调。所以它立即触发。而在拖放情况下，会创建一个常规 FileEntry 对象。此处的 file() 方法不会立即触发。

就我而言，这导致了问题，因为在处理链的更下游，我有：

public readFile(fileEntry: FileSystemFileEntry): Observable<File> {

    const subject: Subject<File> = new Subject<File>();

    fileEntry.file((f: File) => {
        subject.next(f);
        subject.complete();
    });

    return subject.asObservable();
}

伪造的 FileEntry.file() 在任何东西都可以订阅 Observable 之前就被触发了。我通过将 Subject 更改为 new ReplaySubject(1) 解决了这个问题。