使用 Angular 8 前端跟踪从 .Net Core 上传的 Amazon S3 存储桶文件

Question

我正在尝试从 Angular 8 Frontend ->.Net Core Controller Backend -> S3 Bucket 上传文件

我需要跟踪上传的进度，以便向用户显示进度条。

upload(files) {
        this.file = files[0].name;
        if (files.length === 0)
            return;
        const formData = new FormData();
        for (let file of files)
        formData.append(file.name, file);
       

        const uploadReq = new HttpRequest('POST', `api/upload/uploadfile`, formData, {
            reportProgress: true,
        });
        this.http.request(uploadReq).subscribe(event => {
            if (event.type === HttpEventType.UploadProgress)
                this.progress = Math.round(100 * event.loaded / event.total);
                if (this.progress == 100) {
                    this.uploaded = true;
                    this.error = false;
                }
            else if (event.type === HttpEventType.Response)
                this.message = event.body.toString();
               
        });
    }

在 .net 核心 controller 上，我连接到 s3

[HttpPost("uploadfile"), DisableRequestSizeLimit]
  

  public ActionResult UploadFile()
        {
      
            try
            {
            IAmazonS3 client = new AmazonS3Client("xxx", "xxx",RegionEndpoint.USWest2);
            var file = Request.Form.Files[0];

            //string destPath = "folder/sub-folder/test.txt"; // <-- low-level s3 path use /
            PutObjectRequest request = new PutObjectRequest()
            {
                InputStream = file.OpenReadStream(),
                BucketName = "vtcleaner",
                Key = file.FileName // <-- in S3 key represents a path  
            };

            PutObjectResponse response =  client.PutObjectAsync(request).Result;

            return Json("Upload Successful.");
            }
            catch (System.Exception ex)
            {
                return Json("Upload Failed: " + ex.Message);
            }
        // Hello
        }
    }

为了跟踪进度，我打算使用以下方法

1. 使用来自 s3 https://docs.aws.amazon.com/AmazonS3/latest/dev/LLuploadFileDotNet.ZFC35FDC70D5FC69D269EZ883A822C7A53 的低级别 API

2. 持续跟踪UploadPartProgressEventCallback事件并将值传递给 Angular

这是正确的方法吗？ 由于调用将是一个异步方法，如何跟踪进度变量？

Answer 1

不幸的是，您必须通知前端有关进度变化的信息。 所以，你应该向你的前端提出一种“请求”。 常规 REST 不支持此功能，但您可以使用SignalR进行此建议。 要获取有关上传建议的信息，您的想法是适用的。