如何从 args 中提取数据和文件名以上传文件？

Question

我使用 dropzone.js 和 angular 6.x、TypeScript 和 ASP.net Core 作为后端。我能够从 dropzone.js 模块获取所有文件，但我找不到如何将它们发送到后端。

让我给你看一些代码。我想将一组文件发送到后端。为此，我有一个带有全局变量的媒体组件，我在其中添加了每个上传成功的文件：

export class MediaComponent implements OnInit {
     public files: Array<FileParameter> = new Array<FileParam>();

     constructor(...){ ... }

     public onUploadSuccess(args): void {
        // Add the file to the collection
        this.files.push(args);
     }

     public onDropZoneQueueComplete($event, dz) {
        this._mediaService.post(this.files).subscribe(
            res => console.log(res),
            err => console.log("error on upload"),
            () => console.log("file uploaded"));
     }
}

这里是_mediaService.post的服务层。此代码由 NSwagStudio 生成。我想我只能给你看这部分。我很确定这足以帮助我。

post(model?: FileParameter[] | null | undefined): Observable<FileResponse | null> {
    let url_ = this.baseUrl + "/api/Media";
    url_ = url_.replace(/[?&]$/, "");

    const content_ = new FormData();
    if (model !== null && model !== undefined)
      model.forEach(item_ => {
        content_.append("model", item_.data, item_.fileName ? item_.fileName : "model");
      });
}

所以！！问题是 model 和来自 args 的数据不适合！

Args 是一个具有三个索引的数组对象。

模型的类型是FileParameter这是NSwag为Microsoft.AspNetCore.Http.IFormFile[=17=生成的文件]

export interface FileParameter {
  data: any;
  fileName: string;
}

export class FileParam implements FileParameter {
  data: any;
  fileName: string;
}

export interface FileResponse {
  data: Blob;
  status: number;
  fileName?: string;
  headers?: { [name: string]: any };
}

最后，我也尝试过从 args 中获取我想我必须要获取的内容，但我收到了这条错误消息 （TypeError：对象不支持任何数组的此操作 javascript） :

public onUploadSuccess(args): void {
    var file: FileParameter = new FileParam();

    for (var i = 0; i < args[1].files.length; i++) {
      file.data = args[1].files[i];
      this.files.push(file);

    }
  }

动作控制器现在是这样的：

public async Task<IActionResult> Post(IEnumerable<IFormFile> model)
        {
            return Content("Uploaded all media assets.");
        }

我尝试查看从模型上传的文件。它始终为空。请告诉我该怎么做？

Answer 1

如果有人像我一样挣扎，这里是问题的答案：

第一件事：NSwag 生成器只会为 Microsoft.AspNetCore.Http.IFormFile 的类型创建一个接口。没有class也不需要

2：将public files: Array<FileParameter> = new Array<FileParam>();改为public files: Array<any> = new Array<any>();

将 onUploadSuccess(args) 更改为 onUploadSuccess($event)
然后将 this.files.push(args); 更改为 this.files.push({ data: $event[0], fileName: $event[0].name }); 索引 0 处的 $event 很重要，因为这是将对应于 IFormFile 的数据。
将所有文件发送到 NSwag 生成的服务层。它会很好地工作。不要忘记在完成时清除 this.files，如下面的代码所示。

public onDropZoneQueueComplete() {
    this._mediaService.post(this.files).subscribe(
        res => console.log(res.status),
        err => console.log("error on upload"),
        () => {
            console.log("file uploaded, files array is now reset.");
            this.files = new Array<any>(); /* Clear files! */
        });
}

如何从 args 中提取数据和文件名以上传文件？

How to extract data and file name from args for upload files?

javascript

c#

dropzone.js

asp.net-core-2.0

angular