我正在使用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
我也尝试过更改版本。还有什么可以尝试解决这个问题?
答案 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