Angular 6 и Node Js AWS S3 Индикатор загрузки файлов

Question

Я пытаюсь создать индикатор выполнения при загрузке файлов через Angular 6 (внешний интерфейс) и NodeJ (внутренний интерфейс) в корзину asw-s3. Как получить прогресс (или уже загруженные байты) и получить их в интерфейсе Angular 6 в реальном времени?

Answer 1

Вы можете просто загрузить файл с обычным 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);

                 });

Если надежда, это помогает! : -)

Answer 2

Не уверен, есть ли у 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

Интерфейс 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

Узел Сторона Я обновляю этот пост, чтобы добавить образец кода узла (после комментариев). Я не так хорош в 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, это будет означать, что ваш фронт работает правильно.