如何在将文件传递到后端(Angular8)的同时，将图像从前端(C#)发送到azure-blob-存储

Question

我试图允许用户上传他们的个人资料图片的图片。我想把它存放在我的天蓝色储物库里。所以，在做了一些研究之后，通过了不同的理论，我决定把文件传递给后端，然后把后端的文章传递给我的蔚蓝的博客。然而，在这样做后，我得到一个500内部服务器错误时，试图上载一个选定的文件。

我的前端代码使用角8，后端使用C#/ASP.NET code。通过使用PostMan查看我的控制器是否工作，我已经能够成功地将一个图像发布到我的天蓝色blob存储器中。主要问题是让我的前端代码将这个文件传递给我的控制器，它将处理投递到azure存储。

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

FrontEnd(Angular8) 'upload-profile-service.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);
      })

  }

BackEnd(C#) 'UploadPicController.cs‘片段

    [Route("myupload")]
    [ApiController]
    public class FileUploadController : Controller
    {
        private string _conn = <my_key_to_azure_blob_storage>;
        private CloudBlobClient _blobClient;
        private CloudBlobContainer _container;
        private CloudStorageAccount _storageAccount;
        private CloudBlockBlob _blockBlob;

 [HttpPost("[Action]")]
        public async Task<IActionResult> SaveFile(IFormFile files)
        {

            _storageAccount = CloudStorageAccount.Parse(_conn);
            _blobClient = _storageAccount.CreateCloudBlobClient();
            _container = _blobClient.GetContainerReference("profileimages");
            //Get a reference to a blob
            _blockBlob = _container.GetBlockBlobReference(files.FileName);

            //Create or overwrite the blob with contents of a local file
            using (var fileStream = files.OpenReadStream())
            {
                await _blockBlob.UploadFromStreamAsync(fileStream);

            }
            return Json(new
            {
                name = _blockBlob.Name,
                uri = _blockBlob.Uri,
                size = _blockBlob.Properties.Length
            });
        }
}

当调用httpPost函数时，我希望我的蓝色斑点能够通过UploadImageToBlob接收图像，但是，我收到了这个错误.

zone.js:3372 POST http://localhost:5000/myupload/SaveFile 500 (内部服务器错误) core.js:5847错误HttpErrorResponse{headers: HttpHeaders，status: 500，statusText：“内部服务器错误”，url："http://localhost:5000/myupload/SaveFile"，ok: false，…}错误：“"http://localhost:5000/myupload/SaveFile"proto：http://localhost:5000/myupload/SaveFile：500内部服务器错误”名称："HttpErrorResponse"ok: falsestatus: 500statusText：“↵服务器错误”url:HttpErrorResponse HttpResponseBase.

下面是关于我在Developer Tools‘：Object (未设置为对象实例)的错误日志中获得的更新信息。

Answer 1

下面是我的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);
        }

当我尝试使用以下方法时，我也遇到了同样的问题：

GetBlockBlobReference() or `GetBlobReferenceFromServerAsync`

此外，我建议您在获得容器引用后添加以下一行：

等待container.CreateIfNotExistsAsync()；

当我在使用GetBlobReferenceFromServerAsync()时，在开发人员工具中调试网络选项卡中的代码时

造成500人死亡的原因如下：

​

​

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

如果您有任何帮助，请告诉我，将分享我的代码库。