Question

我有这个进度条

<div class="progress progress-striped" ng-class"{active: file.isUploading()}">
    <div class="progress bar" role="progressbar" ng-style="{'width' : (file.sizeUploaded() / file.size * 100) + '%'}"></div>
</div>

使用chrome dev工具调试后，我将良好的宽度发送到ng-style。当我停止执行时（在源代码中使用F8），样式更新为良好的宽度。如果我没有停止执行，那么条形图会缓慢下降到1％，然后当上传达到100％时，条形从1到100％。

我正在使用ng-flow来上传我的文件而不是一个完整的文件。

这里有一些图像来显示行为：
第一张图片显示它没有足够快地更新样式（0％的条形图不显示小蓝条） Not updated 这是文件完全上传时发生的情况 When finished 当我在开发人员工具源代码（调试）中按F8时，样式会正确更新。 Updated when in debug

以下是带有进度条的上传的link to a working example。

我尝试在ng-style中使用file.progress（），但它的行为相同。在调试器之外，上传的大小变化很好，它实际上只是ng-style似乎没有更新。

编辑：在Firefox中测试，条形加载速度稍快，当文件达到100％时，最高可达5-10％。

编辑2：

sizeUploaded: function () {
  var size = 0;
  each(this.files, function (file) {
    size += file.sizeUploaded();
  });
  return size;
}

这里是html ...

<div flow-init flow-name="flow" class="span5 clearfix">
    <div class="alert" flow-drop>
        Drag And Drop your file(s) here
    </div>

    <span class="btn" flow-btn><i class="icon icon-file"></i> Upload File</span>

    <div ng-repeat="file in flow.files">
        {{file.name}} ({{file.size}} kB)
        <br />
        IS COMPLETE: {{file.isComplete()}}
        <br />
        ERROR: {{file.error}}
        <br />
        SIZE UPLOADED: {{file.sizeUploaded()}} kB
        <br />
        IS UPLOADING: {{file.isUploading()}}
        <br />
        {{file.sizeUploaded()}} kB / {{file.size}} kB | {{file.sizeUploaded() / file.size * 100 | number:0}}%
        <div class="progress active progress-striped" ng-class"{active: file.isUploading()}">
            <div class="progress bar" role="progressbar" ng-style="{'width' : (file.sizeUploaded() / file.size * 100) + '%'}">{{file.sizeUploaded()}} / {{file.size}} kB | {{file.sizeUploaded() / file.size * 100 | number:0}}%</div>
        </div>
        <input type="button" ng-click="file.resume()" value="Start/Resume" />
        <input type="button" ng-click="file.pause()" value="Pause"/>
    </div>


    <table>
        <tr ng-repeat="file in flow.files">
            <td>{{$index+1}} | </td>
            <td>{{file.name}}</td>
        </tr>
    </table>
</div>

附加说明：我使用的是Angular 1.1.5

Answer 1

如果您在本地进行测试，则上传时间不应超过一秒。 Flow.js有一个名为progressCallbacksInterval的配置参数，如果你把它设置为高，那么你将无法看到任何进展。尝试将此设置为0，这意味着每次进度事件视图都将更新。

Answer 2

设置百分比时，您应该使用file.progress：

file.progress() * 100

Answer 3

如果没有查看代码或代表问题的小提琴，我只能想到几个可能性：

请记住，Angular只会在模型值更改时更新您的视图。所以你可以做的是创建一个模型属性，比如说

$scope.uploadProgress

并使用$timeout（或Angular 1.2中的$interval）来更新它，然后在上传完成后停止执行。

然后，在您定期更新属性后，将视图绑定到：

 <div class="progress progress-striped" ng-class"{active: file.isUploading()}">
   <div class="progress bar" role="progressbar" ng-style="{'width' : uploadProgress + '%'}"></div>
</div>

我认为问题是Angular没有评估(file.sizeUploaded() / file.size * 100)的变化，至少我觉得不应该这样做，你应该更新一个属性，角度应该消化它。

让我知道它是如何发生的，所以如果这不起作用，我可以更新我的答案。

你也可以尝试观察属性并创建一个返回其值的函数，然后将div绑定到该值：

//this object has all the info about the upload
$scope.uploadObject = {
    uploadedProgress: 0
}

$scope.barStyle = function() {
        return {
            width: $scope.uploadObject.uploadedProgress + '%',
            color: "#FFF" //Any property you may want to add
        };
};

$scope.$watch("uploadObject", $scope.barStyle);

然后，您更新视图以反映此更改：

<div class="progress progress-striped" ng-class"{active: file.isUploading()}">
   <div class="progress bar" role="progressbar" ng-style="barStyle()"></div>
</div>

Answer 4

我认为这个问题可能是我和我的朋友们在图像上传过程中遇到的问题。问题是，客户端跟踪整个上载事件的前1％作为文件离开客户端到达服务器端所花费的时间。

剩下的99％是服务器端所述文件的实际处理，并将其返回给客户端。由于我们的服务器没有向客户端发送事件（如果确实如此，我们可以正确跟踪其进度），我们在1％的时间内静止不动一段时间，然后立即跳到100％作为文件回到客户端。

我们纠正这种情况的方法是将服务器端的图像处理放在后台作业中，然后简单地将当前上传大小的因子（在您的情况下为file.sizeUploaded()）提高100。事件的第一部分流动进度条，这对您的日常用户来说实际上很有趣。

将剩余的流程转移到后台作业，然后我们保留上传文件的本地副本（通过各种HTML5 Data API），以便能够将图像呈现给用户。这样我们就可以在某种意义上将事件与服务器分离，并可以继续我们的快乐业务。

现在，这一切都很好 - 但我不确定这是否会以任何方式或形式影响你。我甚至不确定flow.js是否已默认执行此操作，因为仅XHR2 Progress Events不会跟踪服务器端的事情。因此，对于已经执行此操作的库来说是有意义的，因为您无法构建像flow.js这样的库并且依赖于服务器发出事件（我想有一种方法）。

无论如何，你能尝试将因子提高100，看看你得到了什么结果？我很好奇结果可能是什么，如果我们实际上坐在同一条船上。

祝你好运：）

ng-style不够快速更新

4 个答案: