.upload不是ng-file-upload中的函数

时间:2016-08-06 04:55:32

标签: angularjs file-upload

我正在使用NG-FILE-UPLOAD进行文件上传,预览并发送到服务器。

我添加了文件upload.js和upload.shim.js是我的文件direcory.added他们在项目中,并在我的角度模块中添加了依赖。工作与this one相同。

HTML

      <fieldset>
  <input type="file" ngf-select="" class="form-control" ng-model="picFile"
   name="file" accept="image/*" ngf-max-size="2MB" required="" />
  <img ngf-thumbnail="picFile" class="thumb" width="300"/>
  <button ng-click="picFile = null" ng-show="picFile">Remove</button>
  <br />
  <button ng-click="uploadPic(picFile)">Submit</button>
  <span class="progress" ng-show="picFile.progress >= 0">
    <div style="width:{{picFile.progress}}%" ng-bind="picFile.progress + '%'"></div>
  </span>
  <span ng-show="picFile.result">Upload Successful</span>
  <span class="err" ng-show="errorMsg">{{errorMsg}}</span>
</fieldset>

控制器:

  $scope.uploadPic = function(file) {
    Upload.upload({
        url: '/student/studentimages',
            data: {
            uploadedPicture: file,
            uploadedFrom: 'recipe'
        },
    }).then(function(response) {
        $timeout(function() {
            $scope.result = response.data;
        });
    }, function(response) {
        if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data;
    }, function(evt) {
        $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
    });

}

但是当我点击提交时,它会给我一个错误

Upload.upload is not a function
at Scope.e.uploadPic (app.min.js:1)
at fn (eval at compile (angular.js:13036), <anonymous>:4:296)
at update (upload.js:533)
at upload.js:611
at angular.js:17571
at completeOutstandingRequest (angular.js:5370)
at angular.js:5642

我也尝试过更改版本。还有什么可以尝试解决这个问题?

1 个答案:

答案 0 :(得分:0)

好像你没有正确初始化/注入依赖项。

在模块中:

var app = angular.module('your_module', ['ngFileUpload']);

在控制器中:

app.controller('MyCtrl', ['$scope', 'Upload', function ($scope, Upload) {
$scope.upload = function(dataUrl) {
        Upload.upload({
            url: AppConstants.api.images,
            data: {
                uploadedPicture: dataUrl,
                uploadedFrom: 'recipe'
            },
        }).then(function(response) {
            $timeout(function() {
                $scope.result = response.data;
            });
        }, function(response) {
            if (response.status > 0) $scope.errorMsg = response.status + ': ' + response.data;
        }, function(evt) {
            $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
        });
    }
}

检查此link