如何在 dropzone.js Angular4 中添加选项 "params"

Question

我正在申请 angular 4. 我正在使用 dropzone.js 向后传输文件。要在 angular 4 中使用 Dropzone.js，我使用 ngx-dropzone-wrapper.

我想在发送文件时传递一个新参数（使用 'params' 选项）。参数是一个函数，return 一个字符串，用户单击时结果会发生变化。它实际上是一个 Singleton，它的第一次创建是在 app.component.ts 文件中的 ngOnInit() 函数中。

我的 app.module.ts 看起来像这样（dropzone.js 模块添加到项目中）：

import { DropzoneModule, DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
const DROPZONE_CONFIG: DropzoneConfigInterface = {
    url: 'http://localhost:81/api/createFiles',
    maxFilesize: 50,
    acceptedFiles: 'image/*',
    params: { 'whereToCreate': **the function goes here** }
};

@NgModule({
...
imports: [
    ...
    DropzoneModule.forRoot(DROPZONE_CONFIG)

我的 HTML 使用 ngx-dropzone-wrapper（它与 github of ngx-dropzone-wrapper 中的示例完全一样）：

<dropzone [config]="config" [message]="'Click or drag images here to upload'" (error)="onUploadError($event)" (success)="onUploadSuccess($event)"></dropzone>

Answer 1

我不知道，但是Dropzone.js发送了表单中的所有输入。

因此，我将 div 转换为一种形式并添加隐藏输入：

<form [dropzone]="config" (error)="onUploadError($event)" (success)="onUploadSuccess($event)">
    <input type="hidden" name="whereToCreate" value="{{ this.currentFolder.get() }}">
</form>

Answer 2

试试这个：发送文件时，它将触发其中的许多事件 sending 事件，在此事件中，您将作为参数 File , xhr, formData 在 formData 中接收你可以 .append(key, value)。然后它将与每个文件一起发送新参数。你的 html:

        <div class="text-center well">
          <dropzone [config]="dropzoneConfigI"
                [message]="'Click or drag images here to upload'"
                (error)="onError($event)"
                (sending)="onSending($event)"
                (sendingmultiple)="onSendingmultiple($event)"
                (success)="onSuccess($event)"
                (addedfile)="onAddedFile($event)"
           >
           </dropzone>
    </div>

您的控制器：

  onSending(data): void {
    // data [ File , xhr, formData]
    const file = data[0];
    const formData = data[2];
    formData.append('order', someIteratorValue);
  }

希望对您有所帮助。

如何在 dropzone.js Angular4 中添加选项 "params"

How to add option "params" in dropzone.js Angular4

dropzone.js

angular