AngularJS烤面包机显示警报两次，而不是一次上传文件

Question

我正在使用Toaser通知用户，该文件已成功上传。问题是烤面包机两次显示消息。

我的HTML代码的一部分：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-resource.min.js"></script>
<script src="http://code.angularjs.org/1.4.8/angular-animate.min.js" ></script>
<script src="../common/toaster.js"></script>
<script src="../common/ng-file-upload.min.js"></script>
<script src="../common/ng-file-upload-shim.min.js"></script>
<script src="../common/angular-sanitize.min.js"></script>
<script src="messages.controller.js"></script>
<script src="../common/cookieGet.js"></script>
...
<table class="sendFile" ng-show="hiddenFriendId != null" style="overflow-y: auto; overflow-x: hidden; height:100px; width:100%;">
            <tbody>
                <tr>
                    <td style="vertical-align: top;">
                        <div 
                        width = "100%"
                        ngf-select="" 
                        ngf-drop="" 
                        ng-model="files" 
                        class="drop-box"
                        ngf-drag-over-class="{ accept:'dragover', reject:'dragover-err', delay:100}"  
                        ngf-multiple="true" ngf-allow-dir="false"
                        ngf-max-size="10MB" ngf-max-files="10" 
                        accept="image/*,application/pdf" 
                        ngf-pattern="'image/*,application/pdf'">
                            Click here <b>OR</b> drag&drop pdfs or images
                        </div>
                        <div ngf-no-file-drop>File Drag/Drop is not supported for this browser</div>
                        <div ng-show="files.length>0">
                            <div ng-repeat="f in files"> 
                                <progressbar ng-show = "f.progressPercentage > 100"> 
                                    <bar style="width:{{f.progressPercentage}}%;">
                                        Upload: {{f.name | limitTo:50 }} {{f.$error}} {{f.$errorParam}} - {{ f.progressPercentage }}% completed
                                    </bar>
                                </progressbar>
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>

这是我的JS零件：

$scope.upload = function (files) {
   var urlUploadFile = "http://localhost:8180/ChatRestNoSQLMaven/rest/MessageService/upload/";
   var progressPercentage = 0;
   if (files && files.length) {
       for (var i=0; i < files.length; i++) {
          var file = files[i];
          if (!file.$error) {
             Upload.upload({
               url: urlUploadFile,
               data: {
                   securityKey: securityKey,
                   friendId: $scope.hiddenFriendId,
                   file: file  
               }
           }).then(function (resp) {
                $timeout(function () {
                });
           }, function (response) {
                if (response.status > 0) {
                   $scope.errorMsg = response.status + ': ' + response.data;
                   toaster.pop("error","Error","Unable to upload file. Please try again...");
                }
           }, function (evt) {
                var loaded = evt.loaded;
                var total = evt.total;
                var number = 100.0 * (evt.loaded / evt.total);
                if (number == 100){
                    toaster.pop("success","File uploaded","File " + file.name + " successfully uploaded");
                }
                file.progressPercentage = number.toFixed();
           });
          }
       }
   }
}

因此，任何人都可以帮助我避免此问题，并仅发布一次敬意的警报。谢谢！

Answer 1

从https://github.com/danialfarid/ng-file-upload/blob/blob/master/master/readme.md#-usage下的Javascript code部分中在Upload.upload().then(...)中，块用于更新进度仪表。不能保证只运行一次。

您应该尝试将烤面包机代码放在当前有$timeout(...)的第一个回调中，以帮助隔离问题。

Answer 2

您是否发布了文件交叉域？如果您这样做，浏览器将执行两次请求：首次是选项请求，第二次是真实的帖子请求。在网络中查看它浏览器的DevTools，以确保浏览器需要多少。