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();
           });
          }
       }
   }
}

所以，谁能帮我避免这个问题，只抛出一次 toaser 警报。谢谢！

Answer 1

你post文件跨域了吗？如果跨域，浏览器会做两次request:first一次是OPTION请求，第二次是真实的POSTrequest.Check 它在浏览器的 devtools 的网络中，以确保浏览器做了多少请求。

Answer 2

从 https://github.com/danialfarid/ng-file-upload/blob/master/README.md#-usage 下的 Javascript code 部分，您可以看到 Upload.upload().then(...) 块中的 THIRD 回调用于更新进度表。不能保证运行一次。

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

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

AngularJS toaster shows alert twice instead of one time on file upload

javascript

angularjs

file-upload

toast

angular-toastr