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

Question

我正在使用 angular2-dropzone-wrapper，我几乎可以按需使用它。

我有这样的配置：

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

当我 select 上传文件时，我得到了很好的进度条。上传所有文件后，我最终得到一个大的空白块，之前包含进度条。我没有看到任何东西，因为我设置了 createImageThumbnails: false 这是正确的，因为我正在上传 XML 文件并且不需要缩略图。

当所有文件完成后，我希望重置放置区。所有以前上传的文件都被删除，拖放区又回来了。

我发现了几个使用 removeFile(file) 方法的示例。这似乎可以解决问题，但示例在 JavaScript 中，我正在使用 TypeScript，但不知道如何转换它（我是 TypeScript 的新手）。

我确实在听 QueueComplete:

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

在这里我想我需要调用removeFiles方法或者在'Success'事件监听器中调用removeFile。

编辑：我的 HTML:

  <dropzone [config]="dropZoneConfig" [message]="'Click or drag images here to upload'"
          (error)="onDropZoneUploadError($event)"
          (sendingmultiple)="onDropZoneSendingMultiple($event)"
          (queuecomplete)="onDropZoneQueueComplete($event)"></dropzone>

Answer 1

Dropzone documentation 表示您需要在 Dropzone 实例，即 myDropzone.removeAllFiles().

但是，浏览 angular2-dropzone-wrapper 的源代码时，我偶然发现了一个 reset() 方法，它会为您调用 this.dropzone.removeAllFiles()。旁注：调用 removeAllFiles() 时，不会删除正在上传的文件。

您可以使用以下语法调用 reset() 方法：

<dropzone #dz (queuecomplete)="dz.reset()"></dropzone>

或者，如果您有更多代码要在 queuecomplete 上执行，您可以调用自定义方法并将对指令 (dz) 的引用传递给它：

<dropzone #dz (queuecomplete)="onDropZoneQueueComplete($event, dz);"></dropzone>

然后在你的 class:

private onDropZoneQueueComplete(event, dz) {
  this.filesListComponent.reload();  // additional code
  dz.reset();
}

Paul 还提到他添加了以下内容 CSS:

.dz-preview.dz-file-preview.dz-processing.dz-success.dz-comp‌lete { display: none !important; }

仅供参考，我最初的想法是：让我们获取由 dropzone 指令创建的 Dropzone 实例！不幸的是，angular2-dropzone-wrapper 不允许您访问它创建的 dropzone 实例（this.dropzone 是私有的属性）。它也不是 exportAs 实例（这会让你写类似 <dropzone #mydz="dzinstance"></dropzone> 的东西来在你自己的 mydz 属性中获取 dropzone 实例）。

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

DropzoneJS hides dropzone area after uploading, how to get it back?

typescript

dropzone.js

angular