Angular

Question

我有一个 API 可以拍摄图像并将其保存到我的驱动器。当我使用 Postman 时它工作正常。但是，当我尝试从我的 Angular 服务调用 API 时，没有任何反应。我必须更改什么才能上传图片？谢谢。

这是我的组件：

onSaveFile(e) {

  this.imagePreviewUploaded = false;
  this.changeImage = false;
  this.fileName = "";

  var image = this.uploadForm.get('img').value;
  const formData: FormData = new FormData();
  formData.append('formFile', image);

  this.generalService.uploadGeneralConfigurationLogo(formData);

  this.filePath = defaultImage;
  this.uploadedTries = 0;
  this.toastr.success("Success", "The image has been uploaded!")

}

这是我上传图片的表格：

<form [formGroup]="uploadForm" (ngSubmit)="onSaveFile($event)">

  <div class="row" *ngIf="changeImage">
    <div class="col-sm-12 align-items-center">
      <div class="card">
        <!--Preview-->
        <div *ngIf="filePath && filePath !== ''">
          <img [src]="filePath" [alt]="uploadForm.value.name" class="avatar">
        </div>
        <div class="card-body">
          <h5 class="card-title">{{fileName}}</h5>
          <p class="card-text">Upload preview. Dont forget to save it.:)</p>
          <button type="submit" class="btn btn-primary" *ngIf="imagePreviewUploaded">Save</button>
          <a *ngIf="uploadedTries == 0" href="javascript:void(0)" (click)="file.click()" class="btn btn-primary">
            Upload
          </a>
          <a *ngIf="uploadedTries > 0" href="javascript:void(0)" (click)="file.click()" class="btn btn-primary">
            Upload Diffrent image
          </a>

          <input type="file"
                 #file
                 [multiple]="false"
                 (change)="imagePreview($event)"
                 style="display:none" />
          <button class="btn btn-secondary" (click)="onCancelFileUpload($event)">Cancel</button>
        </div>
      </div>
    </div>
  </div>

</form>

这是我的Angular上传图片的服务方法：

uploadGeneralConfigurationLogo(formFile) {
  return this.http.post<GeneralConfiguration>(this.baseUrl + 'generalConfiguration', formFile, { headers: { 'Content-Type': undefined }  })
}

这是我的 API:

[HttpPost]
public async Task<IActionResult> UploadFile([FromForm] IFormFile formFile)
{
    if (formFile.Length > 0)
    {
        var filePath = Path.GetTempFileName();

        using (var stream = System.IO.File.Create("c:/images/logo.png"))
        {
            await formFile.CopyToAsync(stream);
        }
    }

    return Ok(true);
}

Answer 1

您需要 subscribe observable 才能将请求提交给 API。

An Observable instance begins publishing values only when someone subscribes to it. You subscribe by calling the subscribe() method of the instance, passing an observer object to receive the notifications.

onSaveFile(e) {

  ...

  this.generalService.uploadGeneralConfigurationLogo(formData).subscribe(
    next: () => {
      // TO-DO Handle success scenario
    },
    error: (err: Error) => {
      // TO-DO Handle error scenario
    }
  );
}

当您 return 从 UploadFile API 方法中获取布尔结果时，uploadGeneralConfigurationLogo 方法应该 return 的（观察者）值bool 类型。

uploadGeneralConfigurationLogo(formFile): Observable<bool> {
  return this.http.post<bool>(this.baseUrl + 'generalConfiguration', formFile);
}

Angular - 将图片上传到 API

Angular - Upload image to API

c#

typescript

asp.net-core-webapi