angular - NGX Uploader 上传进度跃升至 100%

问题描述

将 url 更改UploadInput为演示 url 以外的其他内容时，文件上传的进度条几乎是即时的，即使文件仍处于上传状态。我在进度条上测试过 90mb 的文件会从 13% - 60% - 100% 跳跃。当根据ngx-upload.comurl 上传时，它会显示正确的进度，包括 ETA 和上传速度。

UploadOutput文件正式上传后正确触发的 done 事件。

我正在使用 laravel 内置的存储支持来上传 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触发。正如它应该。

演示 API 网址代码

之前在 git 项目上提出过这个问题，但没有解决。

标签： angularlaraveltypescriptamazon-s3ngx-uploader

angular - NGX Uploader 上传进度跃升至 100%

问题描述

解决方案

推荐阅读