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

【问题标题】：How to extract data and file name from args for upload files?如何从 args 中提取数据和文件名以上传文件？
【发布时间】：2018-06-20 16:41:06
【问题描述】：

我使用带有 angular 6.x、TypeScript 和 ASP.net Core 作为后端的 dropzone.js。我能够从 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

生成的文件

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: Object does not support this action any array 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.");
        }

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

【问题讨论】：

标签： javascript c# angular asp.net-core-2.0 dropzone.js

【解决方案1】：

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

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

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! */
        });
}

【讨论】：