Question

我正在将文件上传到API，该API需要一个带有base64信息的POST请求，以便＆＃34;上传＆＃34;文件（API提供程序不接受二进制文件上载）。它适用于中小型文件（2MB以下）。

我在Angular中通过在选择文件时捕获更改事件来执行此操作：

<input #file type="file" (change)="upload($event)" />

然后，在我的upload（）方法中，我使用readAsDataURL（）方法将$ event数据转换为base64。最后，有一个按下按钮，它使用base64数据和凭据向我的API发送POST请求。

当文件很小并且base64快速编码时，它工作得很好，但是当文件很大（大约4MB或更多）时，编码需要很长时间，因此用户无法判断它是否已完成编码。如果他们按下按钮发送POST，如果编码没有完成则会失败。

有没有办法检测编码何时完成或以某种方式监控编码的进度？

Answer 1

事实证明，FileReader构造函数有一个名为＆＃34; onprogress＆＃34;可以报告当前进度。我需要做的就是附上＆＃34; onprogress＆＃34;属性到我的FileReader实例，我可以用＆＃34; lengthComputable＆＃34;获得进度。在事件上（我的例子是使用Angular 2/4）：

showProgress: number;

let myReader: FileReader = new FileReader();

myReader.onprogress = (e) => {
  if (e.lengthComputable) {
    //Round the progress to a percent whole number 
    this.showProgress = Math.round(100 * e.loaded / e.total);
    return this.showProgress;
  }
}

然后，为了将此进度输出绑定到Bootstrap进度条，我的html看起来像这样：

<div class="progress">
           <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': showProgress + '%' }">
               <span class="sr-only">{{ showProgress }}% Complete</span>
           </div>
   </div>

如何在表单更改事件完成时检测到（将文件转换为base64）

1 个答案: