Angular DropzoneJS上传后隐藏dropzone区域，如何取回？

我使用的是

angular2dropzone包装器

，它几乎可以满足我的需要

我有以下配置：

this.dropZoneConfig = {
    server: this.url,
    maxFilesize: 50,
    acceptedFiles: ".xml",
    parallelUploads: 5,
    uploadMultiple: true,
    createImageThumbnails: false,
    addRemoveLinks: true,
    headers: { "Authorization": "Bearer " + sessionStorage.getItem("AccessToken")}
};

当我选择要上传的文件时，我会看到进度条。 当上传所有文件时，我会得到一个很大的空块，其中以前包含了进度条。我没有看到任何东西，因为我设置了

createImageThumbnails:false

，这是正确的，因为我正在上载XML文件，不需要缩略图

所有文件完成后，我希望dropzone重置。所有以前上传的文件都将被删除，dropzone区域将恢复

我发现了几个使用removeFile（file）方法的示例。这似乎很管用，但示例是JavaScript，我使用的是TypeScript，不知道如何转换它（我是TypeScript新手）

我确实听了

QueueComplete

：

private onDropZoneQueueComplete(event) {
    console.log("In onDropZoneQueueComplete");
}

在这里，我想我需要调用removeFiles方法或在“Success”事件侦听器中调用removeFile

编辑： 我的HTML：

表示您需要在上调用

removeFile（）

或

removeAllFiles（）

Dropzone实例，即myDropzone.removeAllFiles（）

但是，在浏览angular2 dropzone包装器的源代码时，我偶然发现了一个方法，它可以为您调用

this.dropzone.removeAllFiles（）

。旁注：调用

removeAllFiles（）

时，将不会删除正在上载的文件

您可以使用以下语法调用

reset（）

方法：

或者，如果您有更多代码要在

queuecomplete

上执行，则可以调用自定义方法并将引用传递给指令（

dz

）：

然后在你们班上：

private onDropZoneQueueComplete（事件，dz）{
this.filesListComponent.reload（）；//其他代码
dz.reset（）；
}

Paul还提到他添加了以下CSS：

.dz-preview.dz-file-preview.dz-processing.dz-success.dz-comp‌​删除{显示：无！重要；}

---

仅供参考，我最初的想法是：让我们掌握由Dropzone指令创建的Dropzone实例！不幸的是，angular2 dropzone包装器不允许您访问它创建的dropzone实例（

this.dropzone

是私有属性）。它也没有导出为实例（它可以让您编写类似于

的东西，以便在自己的

mydz

属性中获得dropzone实例）。

Paul，我对dropzone或angular2 dropzone包装器都不熟悉，但我想提供帮助。如何收听

QueueComplete

事件？你的

onDropZoneQueueComplete

是如何被调用的？我已经更新了我的帖子并添加了我的HTML代码。使用此配置属性解决了我隐藏dropzone区域的问题：

autoReset:10

现在，当文件上载时，它们会被删除，dropzone区域会再次显示。使用

autoReset

结果会取消所有文件，即使它们尚未上载，因此我需要弄清楚如何调用removeFiles（）方法，我明白了

autoReset也不理想，但它设置了任意的时间限制（如果文件上传时间超过10秒怎么办？）。我会发布我心中的解决方案，请随时通知我。谢谢你的回答。我不知道
#dz
的把戏。我做了一些小改动：
，因为上传完成后我需要做更多的事情：private onDropZoneQueueComplete（event，dz）{this.filelistcomponent.reload（）；dz.reset（）；}，并且我还添加了一些CSS:.dz-preview.dz-file-preview.dz-processing.dz-success.dz-complete{display:none！important；}你能更新你的答案吗？我会标记它。好的，很好。这是我最初的代码，但我简化了它，因为在你提供的代码中，
$event
没有任何用处。：-）我会尽快更新我的答案。（注意，你仍然没有使用
$event
，所以你不必通过它。）
  <dropzone [config]="dropZoneConfig" [message]="'Click or drag images here to upload'"
          (error)="onDropZoneUploadError($event)"
          (sendingmultiple)="onDropZoneSendingMultiple($event)"
          (queuecomplete)="onDropZoneQueueComplete($event)"></dropzone>