4

我在使用ng2-file-upload时遇到了一点问题， 我试图阻止用户两次上传/使用同一个文件。意思是，将相同的文件添加到队列中但尚未上传）。

所以我可以添加这样的文档

this.uploader = new FileUploader({
  url: this.baseUrl + 'claim/document/' + this.claim.id,
  authToken: 'Bearer ' + localStorage.getItem('token'),
  // allowedMimeType: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif'],
  maxFileSize: 15 * 1024 * 1024, // 15 MB
  // headers: [{name:'Accept', value:'application/json'}],
  isHTML5: true,
  autoUpload: false,
});

this.uploader.onAfterAddingFile = fileItem => {
  fileItem.withCredentials = false;
  let docExists = false;
  for (const doc of this.claim.data.generalDocumentDto) {
    if (fileItem.file.name === doc.fileName) {
      docExists = true;
      this.alertService.warning('Document table already contains a file with name ' + fileItem.file.name);
      // this.uploader.clearQueue();
      this.uploader.removeFromQueue(fileItem);
      break;
    }
  }

  if (!docExists) {
    // do some other stuff
  }


};
<input type="file" #fileInput ng2FileSelect [uploader]="uploader" hidden/>
<button type="button" class="btn btn-primary" (click)="fileInput.click()">Upload File</button>

然后我可以像这样从队列中删除它，这在调用“removeFromQueue()”之后似乎有效（我在队列中看不到它）

for (const fileItem of this.uploader.queue) {
  if (this.claimDocumentFileName === fileItem.file.name) {
    this.uploader.removeFromQueue(fileItem);
    break;
  }
}

但是如果我尝试再次添加它，文件上传器窗口会打开，我选择同一个文件，单击它两次，然后什么也没有发生！

它不会触发“onAfterAddingFile()”，如果我查看队列，它不存在。

问题- 我还需要做些什么来告诉上传者允许再次上传相同的文件吗？

我了解默认性质将允许我多次添加同一个文件，我通过我的“onAfterAddingFile()”检查阻止了这一点

奇怪的行为- 如果我添加第一个文件 ex。file1.txt，然后是第二个文件 file2.txt，然后删除 file1.txt，然后读取它，这是允许的并且有效。如果队列不为空，似乎是允许的。但是，如果队列为空，我将无法重新添加我尝试添加的最后一个文件！

关注- 我知道我可以使用 'clearQueue()' 重置队列，但如果我有其他项目，它们都会被删除，所以我不希望这样。

4

2 回答 2

5

起初我以为这是一个 ng2-file-upload 问题，其实不是！是输入文件问题...

我在输入中添加了一个事件，它解决了它。

onFileClick(event) {
  event.target.value = '';
}

<input (click)="onFileClick($event)" />

于 2020-01-23T02:39:39.093 回答
0

我可以通过以下方式解决它

this.uploader.onAfterAddingFile = (item) => {
            item.remove();
            if (this.uploader.queue.filter(f => f._file.name == item._file.name).length == 0) {
                this.uploader.queue.push(item);
            } else {
                alert("file duplicated");
            }
        };
于 2020-06-18T11:57:43.070 回答