NGX Uploader прогресс загрузки скачок до 100%

Question

При изменении UploadInput URL-адрес, отличный от демонстрационного, индикатор выполнения загрузки файла близок к мгновенному, даже если файл все еще находится в состоянии загрузки. Я тестировал файлы размером 90 Мб, а индикатор выполнения будет прыгать с 13% - 60% - 100%. При загрузке против ngx-upload.com URL показывает правильный прогресс, включая ETA и скорость загрузки.

Готовое мероприятие для UploadOutput корректно срабатывает после официальной загрузки файла.

Я использую встроенную поддержку хранилища для загрузки файлов S3.

onUploadOutput(output: UploadOutput): void {
    console.log('output type: ',output.type)
    switch (output.type) {
      case 'allAddedToQueue':
          console.log('addedAddedToQueue');
          let token = this.userService.currentUser().api_token;
          const event: UploadInput = {
            type: 'uploadAll',
            url: environment.serverUrl + 'api/file-upload',
            // url: 'https://ngx-uploader.com/upload', // <---- this works perfectly
            method: 'POST',
            headers: {
                'Authorization': 'Bearer ' + token
            },
            includeWebKitFormBoundary: true, // <----  set WebKitFormBoundary
            data: { foo: 'bar' },
            file: this.files[this.files.length - 1]
          };
          this.uploadInput.emit(event);

        break;

      case 'uploading':
        console.log('uploading')
        console.log(output)
        if (typeof output.file !== 'undefined') {
          // update current data in files array for uploading file
          const index = this.files.findIndex((file) => typeof output.file !== 'undefined' && file.id === output.file.id);
          this.files[index] = output.file;
          console.group();
              console.log('progress is: ',output.file.progress.data.percentage)
              console.log('upload speed: ',output.file.progress.data.speedHuman)
          console.groupEnd();
        }
        break;

      case 'done':
            console.log('done');
            this.files.forEach(file => {
                console.log(file.response);
                // Check the file.response.status.
                // If success, grab the file (file.response.file)
                // this.response.emit(file.response);
                console.log(file.response.file)
            });
        // The file is downloaded
        break;
    }
}

<?php

namespace Facet\Http\Controllers;

use Illuminate\Http\Request;
use \LaravelDoctrine\ORM\Facades\EntityManager;
use \Facet\Services\BaseService;
use Illuminate\Support\Facades\Storage;

class FileUploadController extends ApiController {

    public function store(Request $request) {
        if($request->hasFile('file')) {
            //get filename with extension
            $filenamewithextension = $request->file('file')->getClientOriginalName();

            //get filename without extension
            $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);

            //get file extension
            $extension = $request->file('file')->getClientOriginalExtension();

            //filename to store
            $filenametostore = $filename.'_'.time().'.'.$extension;

            //Upload File to s3
            $output = Storage::disk('s3')->put($filenametostore, fopen($request->file('file'), 'r+'), 'public');

            $url = Storage::disk('s3')->url($filename);
            $response = array('status' => 'success', 'file' => $url);
        } else {
            // File could be too large. Depends on what's specified in php.ini
            $response = array('status' => 'error', 'message' => 'Error with finding file.');
        }
        return response()->json($response);
    }

}
?>

Пример загрузки файла данных для файла 93mb

console.log(output)
    /*
        progress: {
            data: {
                endTime: null
                eta: 0
                etaHuman: "00:00:00"
                percentage: 100
                speed: 88097403
                speedHuman: "84.02 MB/s"
                startTime: 1541465378108
            }
        }
    */

console.group();
    console.log('progress is: ',output.file.progress.data.percentage)
    console.log('upload speed: ',output.file.progress.data.speedHuman)
console.groupEnd();

    // progress is:  52
    // upload speed:  80.45 MB/s

Я не уверен в том, что может быть причиной такого странного поведения прогресса. На вкладке сети по-прежнему отображается состояние ожидания и, как только ответ приходит, только тогда это done Событие пожара. Как это должно.

URL-код демонстрационного API

Эта проблема уже была поднята в git-проекте без решения.

Answer 1

У меня была такая же проблема при разработке локально. Как только я загрузил, он выстрелил до 100%. Я предполагаю, что поскольку он работает локально (на жестком диске), файл мгновенно попадает в локальную конечную точку. Но когда я развернул свое приложение в облаке и протестировал индикатор выполнения, он работал нормально, как в демоверсии.