dropzone意外的formdata内容

时间:2018-02-28 14:20:34

标签: dropzone.js

我正在尝试配置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();
    }
}

此回调按预期调用两次。

如果我这样做,我的文件不会添加到formdata。我不知道它是否正常,但我可以在另一个回调中手动添加它们:

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');
  }

这会将文件正确添加到formdata中,但formdata中还有第三项,我想摆脱它。我不知道它来自哪里。

enter image description here

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

我该怎样摆脱它?或者更好的是,我怎样才能避免它被生成?

1 个答案:

答案 0 :(得分:0)

因此,我无需自己将文件添加到formdata中。

我注意到了:

this.dropzone.processQueue();

onFileAdded()内部回调将丢弃formdata的最后一个文件(这就是为什么我最终将文件添加到formdata中的原因)。

我现在从 onMaxFilesReached()回调中调用它,我的文件已正确添加到formdata。