Asp.net 如何将图像从前端（Angular8）发布到azure blob存储，同时将文件传递到后端（C#）

我试图允许用户上传他们的个人资料图片的图像。我想将它存储在我的azure blob存储中。因此，在做了一些研究并研究了关于仅在前端执行此操作的不同理论之后，我决定将文件传递到后端，并将后端发布到我的azure blob。但是，在这样做时，我在尝试上载所选文件时遇到一个500内部服务器错误

我的前端代码使用Angular 8，后端代码使用C#/ASP.NetCore。通过使用邮递员查看我的控制器是否工作，我已经能够成功地将一个映像发布到我的azure blob存储中，只需使用我的后端即可。主要问题是让我的前端代码将此文件传递给我的控制器，该控制器将处理向azure blob存储的发布

我正在使用一个服务来提供上传图片组件和后端控制器之间的链接

前端（角度8） “上载配置文件服务.ts”代码段：

import { HttpClient, HttpEvent, HttpParams, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { environment } from '@env/environment';

@Injectable({
  providedIn: 'root'
})
export class UploadProfileImageService {

  // dependency injection
  constructor(private _httpClient: HttpClient) { }

  private baseurl =  environment.api + '/myupload';

  // change from any to type image.
  public getImages(): Observable<any> {
    return this._httpClient.get(this.baseurl);
  }

  // Form Data as image to pass to API to be pushed to Azure Storage
  public postImages(formData: FormData): Observable<any> {
    const saveImageUrl = this.baseurl + '/SaveFile';
    return this._httpClient.post<any>(saveImageUrl, formData);
  }

  constructor(
    private consultantStore: ConsultantStore,
    private notification: NotificationsService,
    private dialogRef: MatDialogRef<Upload-Picture-Component>,
    private _uploadProfileImageService: UploadProfileImageService,
    private formBuilder: FormBuilder
  ) { }

  ngOnInit(){}

selectedFile: File = null;
imageChangedEvent: any = '';

  fileChangeEvent(event: any): void {
    this.imageChangedEvent = event;
    this.selectedFile = <File>this.imageChangedEvent.target.files[0];
  }

  UploadImageToBlob(){
    const formData = new FormData();
    formData.append(this.selectedFile.name, this.selctedFile, this.selectedFile.name);
    this._uploadProfileImageService.postImages(formData)
      .subscribe(res => {
        console.log(res);
      })

  }

从'@angular/common/http'导入{HttpClient，HttpEvent，HttpParams，HttpRequest}；
从“rxjs”导入{Observable}；
从“@angular/core”导入{Injectable}；
从'@env/environment'导入{environment}；
@注射的({
providedIn:'根'
})
导出类UploadProfileImageService{
//依赖注入
构造函数（私有_httpClient:httpClient）{}
private baseurl=environment.api+'/myupload'；
//从任意类型更改为图像。
public getImages（）：可观察500（内部服务器错误）

core.js:5847 ERROR HttpErrorResponse{headers:HttpHeaders，状态：500，状态文本：“内部服务器错误”，url:，ok:false，…}错误：
↵http://localhost:5000/myupload/SaveFile: 500内部服务器错误“名称：”HttpErrorResponse“确定：错误状态：500statusText:“内部服务器错误”url:“协议”：HttpResponseBase

下面是我在开发者工具的错误日志中得到的更新
“NullReferenceException:对象引用未设置为对象的实例。”
以下是我的HttpPost方法，它对我很有效：

 [HttpPost]
        public async Task<IActionResult> UploadFileAsync([FromForm]IFormFile file)
        {
            CloudStorageAccount storageAccount = null;
            if (CloudStorageAccount.TryParse(_configuration.GetConnectionString("StorageAccount"), out storageAccount))
            {
                var client = storageAccount.CreateCloudBlobClient();
                var container = client.GetContainerReference("fileupload");
                await container.CreateIfNotExistsAsync();
                CloudBlockBlob blob = container.GetBlockBlobReference(file.FileName);
                await blob.UploadFromStreamAsync(file.OpenReadStream());
                return Ok(blob.Uri);
            }

            return StatusCode(StatusCodes.Status500InternalServerError);
        }

此外，我建议您在获得容器参考后添加以下行：

wait container.CreateIfNotExistsAsync（）

当我在使用GetBlobReferenceFromServerAsync（）时调试开发人员工具中“网络”选项卡中的代码时

以下是造成500人死亡的原因：


请尝试从您的终端调试它，看看它是否有帮助

如果您有任何帮助，请告诉我，您将分享我的代码库。
以下是我的HttpPost方法，它对我很有用：

 [HttpPost]
        public async Task<IActionResult> UploadFileAsync([FromForm]IFormFile file)
        {
            CloudStorageAccount storageAccount = null;
            if (CloudStorageAccount.TryParse(_configuration.GetConnectionString("StorageAccount"), out storageAccount))
            {
                var client = storageAccount.CreateCloudBlobClient();
                var container = client.GetContainerReference("fileupload");
                await container.CreateIfNotExistsAsync();
                CloudBlockBlob blob = container.GetBlockBlobReference(file.FileName);
                await blob.UploadFromStreamAsync(file.OpenReadStream());
                return Ok(blob.Uri);
            }

            return StatusCode(StatusCodes.Status500InternalServerError);
        }

此外，我建议您在获得容器参考后添加以下行：

wait container.CreateIfNotExistsAsync（）

当我在使用GetBlobReferenceFromServerAsync（）时调试开发人员工具中“网络”选项卡中的代码时

以下是造成500人死亡的原因：


请尝试从您的终端调试它，看看它是否有帮助

如果您有任何帮助，请告诉我您是否愿意共享我的代码库。
请尝试..捕获SaveFile方法中的代码，在其上粘贴一个断点，并查看正在发生的实际异常。当它尝试将blob设置为我的容器referencePu时，我会得到以下信息：“NullReferenceException:对象引用未设置为对象的实例。”t try..在SaveFile方法中的代码周围，在其上粘贴一个断点，并查看正在通过的实际异常。我得到“NullReferenceException:对象引用未设置为对象的实例”。当它尝试将blob设置为我的容器引用时，我得到“NullReferenceException:对象引用未设置为实例”对象的ce。错误。并突出显示“CloudBlockBlob blob=\u container.GetBlockBlobReference（file.FileName）'知道为什么吗？你说这对你的应用程序有效，对吗？另外，谢谢你的评论！好的，我没有使用file.FileName，我只是做了一个伪字符串，现在我得到了你的确切错误。当它说'指定的blob不存在'时，你能修复它吗？似乎从我的前端传递的文件是“Null”因此，它找不到（file.FileName），这就是为什么我可能会得到“NullReferenceException”…让我共享一个示例repo，您可以参考它。当然！您还记得如何解决该错误吗？我仍然被卡住，因为传递到后端的文件为null。我得到了一个“NullReferenceException:对象引用未设置为对象的实例”。错误。并突出显示“CloudBlockBlob blob=\u container.GetBlockBlobReference（file.FileName）'知道为什么吗？你说这对你的应用程序有效，对吗？另外，谢谢你的评论！好的，我没有使用file.FileName，我只是做了一个伪字符串，现在我得到了你的确切错误。当它说'指定的blob不存在'时，你能修复它吗？似乎从我的前端传递的文件是“Null”.因此，它找不到（file.FileName），这就是为什么我可能会得到“NullReferenceException”…让我共享一个示例repo，您可以引用它作为参考。当然！您还记得如何解决该错误吗？我仍然被卡住，因为传递到后端的文件为null。
GetBlockBlobReference() or `GetBlobReferenceFromServerAsync`