Question

我正在以角度4进行应用程序。我使用dropzone.js将文件传输回来。要在角度4中使用Dropzone.js，我使用ngx-dropzone-wrapper。

我想在发送文件时传递新参数（使用＆＃39; params＆＃39;选项）。参数是返回字符串的函数，用户单击时结果更改。它实际上是一个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

试试这个：当文件发送时，它会触发并且在这个事件中发生发送事件中的许多事件，您在中可以在formData中接收文件，xhr，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);
  }

希望它有所帮助。

如何添加选项＆＃34; params＆＃34; in dropzone.js Angular4

2 个答案: