dropzone 意外的表单数据内容

Question

我正在尝试配置 dropzone 以便我可以使用 ngx-dropzone-wrapper.

在单个请求中上传 2 个文件

private config: DropzoneConfigInterface = {
    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 2,
    maxFiles: 2,
    maxFilesize: 500,
    url: environment.apiEndpoint + '/the/endpoint',
    acceptedFiles: 'image/jpeg',
    resizeWidth: 500,
    resizeMethod: 'contain',
    resizeQuality: 1.0,
    timeout: 30000,
    addRemoveLinks: true
};

// This allows me to access dropzone API
get dropzone() {
    return this.dropzonComponentRef.directiveRef.dropzone();
}

我在删除第二个文件时触发上传：

onFileAdded(file: File) {
    if (this.dropzone.files.length === this.config.maxFiles) {
      // All files have been dropped we can submit
      this.dropzone.processQueue();
    }
}

这个回调按预期被调用了两次。

如果我只是这样做，我的文件不会添加到表单数据中。我不知道这是否正常，但我可以在另一个回调中手动添加它们：

onSendingMultiple(args: any) {
    const formData = args[2];

    // We are not using the file array returned in args[0]
    // because in contains only one file for some reason
    const files = this.dropzone.files;
    formData.append('firstPic', files[0], 'firstPic.jpg');
    formData.append('secondPic', files[1], 'secondPic.jpg');
  }

这会将文件正确添加到表单数据中，但表单数据中还有第三项，我想删除它。不知道从哪里来的

我检查了onSendingMultiple()回调中的formdata内容，这时候这一项不是formdata的一部分。

我怎样才能摆脱它？或者更好的是，我怎样才能避免生成它？

Answer 1

所以，没有必要自己将文件添加到formdata中。

我注意到调用 :

this.dropzone.processQueue();

在 onFileAdded() 回调中将丢弃表单数据的最后一个文件（这就是我最终自己将文件添加到表单数据的原因）。

我现在从 onMaxFilesReached() 回调中调用它，我的文件已正确添加到表单数据中。

dropzone 意外的表单数据内容

dropzone unexpected formdata content

dropzone.js