Angular 6 和 Node Js AWS S3 文件上传进度条

Question

通过 Angular 6（前端）和 NodeJs（后端）将文件上传到 asw-s3 存储桶时，我正在尝试创建一个进度条。 如何获取进度（或已上传的字节）并在 Angular 6 前端实时接收？

Answer 1

不确定 Angular 是否有特定的方法，但这是我在一些基于 Angular 的网站中使用的工作示例：

sendFile(file) {
    let formData: FormData = new FormData();
    formData.append('my_file', file);

    let xhr = new XMLHttpRequest();
    xhr.upload.onprogress = function (progEvent: ProgressEvent) {
        if (progEvent.lengthComputable) {
            var uploadedSoFar = (progEvent.loaded / progEvent.total) * 100;
            console.log("Uploaded: " + uploadedSoFar + "% ")
            if (progEvent.loaded == progEvent.total){
                // uploaded up to 100%
            }
        }

    };
    xhr.open("POST", `/your_site`, true);
    xhr.send(formData);
}

对发生的事情的一些解释：

表单数据

FormData 接口提供了一种轻松构造一组 表示表单字段及其值的键/值对，可以 然后使用 XMLHttpRequest.send() 方法轻松发送。它用 如果将编码类型设置为，则表单将使用相同的格式 “多部分/表单数据”

https://developer.mozilla.org/en-US/docs/Web/API/FormData

XMLHttpRequest

使用 XMLHttpRequest (XHR) 对象与服务器交互。你可以 从 URL 检索数据，而无需刷新整个页面。 这使得网页可以只更新页面的一部分，而无需 扰乱用户正在做的事情。

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest

节点端 我正在更新这篇文章以添加一个节点代码示例（在 cmets 之后）。我在 node.js 中没有那么好，所以我下面的代码不是一个很好的例子。

const http = require('http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  // Remove this, I use it for this example to be easy to reproduce
  res.setHeader('X-Frame-Options', 'ALLOWALL');
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'POST, GET');
  res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  if (req.method == 'POST') {
        console.log("Receiving file");
        var body = '';
        req.on('data', function (data) {
            body += data;
            console.log("receiving data : " + body);
        });
        req.on('end', function () {
            console.log("received all the data: " + body);
        });
        res.writeHead(200, {'Content-Type': 'text/html'});
        res.end('Reception completed');
    }

});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

如果您在 node.js 中收到数据，这意味着您的前端工作正常。

Answer 2

您可以使用常规 HttpClient 上传文件并使用标志 reportProgress: true。

完整示例：

constructor(private _http: HttpClient,
            private _logger: Logger) {}

this._http
    .post(FILE_UPLOAD_URL, formData, {
          reportProgress: true,
          observe: 'events'
        })
        .subscribe((event: HttpEvent<any>) => {
            switch (event.type) {
                case HttpEventType.Sent:
                    this._logger.debug('Upload started');
                    break;
                case HttpEventType.DownloadProgress:
                    // Live stats are also possible for downloads
                case HttpEventType.UploadProgress:
                    if (event.total) {
                         const progress = Math.round(event.loaded / event.total * 100);
                         const timeElapsed = Date.now() - startTime;
                         const uploadSpeed = event.loaded / (timeElapsed / 1000);
                         const uploadTimeRemaining = Math.ceil(
                                            (event.total - event.loaded) / uploadSpeed
                                        );
                         const uploadTimeElapsed = Math.ceil(timeElapsed / 1000);
                         const uploadSpeed = uploadSpeed / 1024 / 1024;
                         this._logger.debug('Upload stats:', progress, timeElapsed, uploadSpeed, uploadTimeRemaining,  uploadTimeElapsed, uploadSpeed);

                         break;
                     case HttpEventType.Response:
                          this.progressForFile = 100;
                          this._logger.debug('Done! ResponseBody:', event.body);

                 });

如果希望，这会有所帮助！ :-)