dropzone 意外的表单数据内容答案

【问题标题】：dropzone unexpected formdata contentdropzone 意外的表单数据内容
【发布时间】：2018-02-28 14:20:34
【问题描述】：

我正在尝试配置 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的内容，此时这个item已经不是formdata的一部分了。

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

【问题讨论】：

标签： dropzone.js

【解决方案1】：

所以，我不需要自己将文件添加到表单数据中。

我注意到调用：

this.dropzone.processQueue();

内部 onFileAdded() 回调将丢弃 formdata 的最后一个文件（这就是我最终自己将文件添加到 formdata 的原因）。

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

【讨论】：