javascript - multerを使用したng-file-upload、成功は呼び出されず、アップロードは繰り返し呼び出されました

Question

ng-file-uploadを使用して、Angular クライアントからノード/エクスプレス サーバーに画像をアップロードしています。

画像はロードされていますが、「成功」メソッドが呼び出されておらず、画像のアップロードが複数回呼び出されているように見えるため、画像がサーバーに繰り返しアップロードされています。

ここに私のHTMLフォームがあります:

<form accept-charset="UTF-8" ng-submit="uploadPic(picFile)" name="myForm">

            <br>Photo:
            <input type="file" ngf-select ng-model="picFile" ngf-multiple="false" name="file" accept="image/*" ngf-max-size="2MB" required />
            <br>

            <i ng-show="myForm.file.$error.maxSize">File too large {{picFile.size / 1000000|number:1}}MB: max {{picFile.$errorParam}}</i>

            <img ng-show="myForm.file.$valid" ngf-src="!picFile.$error && picFile" class="thumb">

            <br>

            <button class="btn btn-info" type="submit">Submit</button>
            <span class="progress" ng-show="picFile.progress >= 0">
              <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'" class="ng-binding"></div>
            </span>
            <span ng-show="picFile.result">Upload Successful</span>
        </form>

ここに私のJSがあります：

    $scope.uploadPic = function (file) {

        file.upload = Upload.upload({
            url: '/uploads',
            method: 'POST',
            fields: {
                username: $scope.username
            },
            file: file,
            fileFormDataName: 'photo'
        });

        file.upload.then(function (response) {
            console.log("Postcontroller: upload then ");
            $timeout(function () {
                file.result = response.data;
            });
        }, function (response) {
            if (response.status > 0)
                $scope.errorMsg = response.status + ': ' + response.data;
        });

        file.upload.progress(function (evt) {
            // Math.min is to fix IE which reports 200% sometimes
            file.progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));
            console.log("PostController: upload progress " + file.progress);
        });

        file.upload.success(function (data, status, headers, config) {
            // file is uploaded successfully
            console.log('file ' + config.file.name + 'is uploaded successfully. Response: ' + data);
        });
    }

これが私のサーバー側のコードです：

var multer = require('multer');
var upload = multer({ dest: './public/images'});

router.post('/uploads', upload.single('file'), function(req,res,next){
  console.log("Server: got file ");
});

シムライブラリを最初に含める必要があることをどこかで読みましたが、ロードオーダーを交換しようとしましたが、喜びはありませんでした。ここに私のインポート行があります:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<script src="/lib/ng-file-upload/ng-file-upload-shim.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="/lib/ng-file-upload/ng-file-upload.min.js"></script>

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.js"></script>

また、Chrome デバッグ ツールを調べると、アップロードのステータスが「保留中」と表示されます。画像は間違いなくサーバー上にあり、進行状況バー (html 内) は 100% を示しています。しかし、1 分ほど後に、イメージの別のコピーがフォルダーに表示され (この動作はループしているように見えます)、ng-file-upload の「成功」イベントは呼び出されません。

助けてくれてありがとう。