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");
      });
}

所以！问题是模型，并且参数中的数据不适合！

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：对象不支持此操作的任何数组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类型创建一个接口。没有课程，也没有必要。

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

将onUploadSuccess（args）更改为onUploadSuccess（$ event）
然后将索引0处的$ this.files.push(args);更改为this.files.push({ data: $event[0], fileName: $event[0].name });很重要，因为这是将与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中提取数据和文件名以上传文件？

1 个答案: