Question

将UploadInput URL更改为演示URL以外的其他内容时，即使文件仍处于上传状态，文件上传的进度条也将立即显示。我已经在进度条上测试了90mb的文件，它们将从13％-60％-100％跳升。针对ngx-upload.com网址进行上传时，它会显示正确的进度，包括ETA和上传速度。

UploadOutput的完成事件在文件正式上传后会正确触发。

我正在使用内置存储支持的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事件就会触发。应当。

Demo API url code

The issue has been raised before on the git project with no resolve.

Answer 1

在本地开发时，我遇到了同样的问题。一旦上传，它的拍摄率便高达100％。我假设由于文件全部在本地运行（在硬盘驱动器上），因此文件立即到达本地端点。但是，当我将应用程序部署到云中并测试了进度条时，就像在演示中一样，它运行良好。

NGX Uploader上传进度跃升至100％

1 个答案: