1

我正在使用 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 警报。谢谢！

4

2 回答 2

1

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

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

于 2016-12-19T07:03:17.830 回答
0

你有跨域发布文件吗？如果你这样做了，浏览器会做两次请求：第一次是OPTION请求，第二次是真正的POST请求。在浏览器的devtools的网络中检查它以确定有多少请求浏览器执行。

于 2016-12-19T05:25:37.697 回答