如何在 dropzone.js Angular4 中添加选项“参数”答案

【问题标题】：How to add option "params" in dropzone.js Angular4如何在 dropzone.js Angular4 中添加选项“参数”
【发布时间】：2017-08-23 05:43:59
【问题描述】：

我正在 Angular 4 中制作应用程序。我正在使用 dropzone.js 将文件传回。要在 Angular 4 中使用 Dropzone.js，我使用的是ngx-dropzone-wrapper。

我想在发送文件时传递一个新参数（使用“参数”选项）。参数是一个返回字符串的函数，用户单击时结果会发生变化。它实际上是一个 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>

【问题讨论】：

标签： angular dropzone.js

【解决方案1】：

试试这个：当文件被发送时，它会触发其中的许多事件 sending 事件在这个事件中你收到作为参数 File , xhr, formData 在formData你可以。附加（键，值）。然后它将与每个文件一起发送新参数。你的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);
  }

希望对你有帮助。

【讨论】：

【解决方案2】：

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

因此，我将 div 转换为表单并添加隐藏输入：

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

【讨论】：