如何将 FormData 与 ABP 的内置 RestService 一起使用？答案

【问题标题】：How to use FormData with ABP's built-in RestService?如何将 FormData 与 ABP 的内置 RestService 一起使用？
【发布时间】：2020-12-01 12:30:36
【问题描述】：

我想在基于 ABP 的应用程序中上传文件。

我的应用服务是这样创建的：

public async Task<IEnumerable<ScheduleDto>> UploadAsync(IFormFile File)

生成这样的 REST API 端点：

这很好。

现在当我生成代理时，它创建了这样的客户端代理，它不接受文件作为输入，而是为IFormFile 创建了 JSON：

upload = (File: IFormFile) =>
  this.restService.request<any, ScheduleDto[]>({
    method: 'POST',
    url: `/api/app/schedule/upload`,
  },
  { apiName: this.apiName });

由于这种方法没有用，我决定使用 ABP 框架提供的 REST 服务，因为它在内部处理成功和失败。我将RestService 注入到组件中：

constructor(private matchService: MatchService, private scheduleService: ScheduleService,private rest: RestService) {} //

使用该服务，使用request 方法进行调用并将文件作为FormData 传递，但是当我发布文件时没有任何反应：

UploadSchedule(files) {
  const formData = new FormData();
  formData.append('file', files[0], files[0].name);

  this.rest.request<FormData, ScheduleDto[]>({
    method: 'POST',
    url: `/api/app/schedule`,
    body: formData,
  });
}

我可以使用 Angular 的 HTTP 服务上传文件，所以 API 端点没有问题。好像 ABP 生成的服务只支持 JSON 数据，不支持FormData。

【问题讨论】：

标签： c# angular typescript form-data abp

【解决方案1】：

您可以上传带有内置RestService 的文件。你的代码很好，唯一的问题是你没有返回 observable，也没有人订阅它。此外，{ apiName: this.apiName } 似乎不见了。简而言之，将UploadSchedule方法更改为以下，并从您调用的地方订阅它。

UploadSchedule(files) {
  const formData = new FormData();
  formData.append('file', files[0], files[0].name);

  return this.rest.request<FormData, ScheduleDto[]>({
    method: 'POST',
    url: `/api/app/schedule`,
    body: formData,
  },
  { apiName: this.apiName });
}

【讨论】：