0

我正在使用ng-file-upload将图像从 Angular 客户端上传到 node/express 服务器。

正在加载图片，但是没有调用“成功”方法，并且图片上传似乎被多次调用，导致图片重复上传到服务器。

这是我的 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 ");
});

我在某处读到必须首先包含 shim 库，但我尝试交换加载顺序但没有任何乐趣。这是我的导入行：

 <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%。然而，大约一分钟后，该图像的另一个副本出现在文件夹中（此行为似乎循环）并且从未调用 ng-file-upload 'success' 事件。

感谢帮助。

4

0 回答 0