我在使用API作为后端的AngularJS应用上使用ng-file-upload。
从邮递员那里发送我的参数作为表单数据,我的API正在获取文件,如下图所示:
从我看来,我使用以下代码:
<div class="panel-body">
<form ng-submit="update()">
<div class="form-group">
<label class="col-sm-2 control-label">{{ 'name' | translate }}</label>
<div class="col-sm-9"><input ng-model="account.name" class="form-control" placeholder="{{ 'entername' | translate }}">
</div>
</div>
<br/><br/><br/>
<div class="form-group">
<label class="col-sm-2 control-label">{{ 'logo' | translate }}</label>
<div class="col-sm-9">
<div class="btn btn-default" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'" ngf-accept="'imag e/*'" ngf-max-size="2MB">Select</div>
<img ngf-thumbnail="file" class="img-responsive center-block" style="height:50px"/>
</div>
</div>
<br/><br/><br/><br/>
<div class="form-group text-center">
<button class="btn btn-primary" ng-click="index()"><i class="fa fa-btn fa-close"></i> {{ 'cancel' | translate }} </button>
<button class="btn btn-success" type="submit"><i class="fa fa-btn fa-save"></i> {{ 'save' | translate }}</button>
</div>
</form>
</div>
但是从我的angularjs应用程序来看,它不起作用!实际上,我正在关注github上的示例。我的angularjs代码是:
accountController.controller('accountEditController', function ($scope, Upload) {
$scope.update = function() {
if ($scope.file)
$scope.upload($scope.file);
};
$scope.upload = function (logo) {
console.log(logo);
Upload.upload({
url: 'api/account/'+ $scope.id,
method: 'PUT',
file: logo,
sendFieldsAs: 'form-data',
fields: { name: $scope.name },
}).then(function (resp) {
console.log('Success uploaded. Response: ' + resp.data);
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ');
});
};
});
从我的控制台,我收到以下消息: