我无法使用 multer 查看 angular 中的响应
I cannot view response in angular using multer
我正在使用 Multer 上传照片。我的后端是 Node,我能够成功上传图像。当我上传图片时,它会通过 json 发送回 Angular。我成功获得了响应,但在控制台日志中我看到的只是 [object Object]
并且我无法在视图中看到响应。我尝试 stringify
但没有运气。收到回复总是让我失望,我很想最终理解这一点。在我的 HTML 中什么也没有出现。
来自Node.js
的回应
apiRoutes.post('/admin/photos',upload.single('file'),function(req,res){
console.log(req.file);
res.json(req.file);
});
Angular上传
$scope.submit = function() {
if ($scope.file) {
$scope.upload($scope.file);
}
};
// upload on file select or drop
$scope.upload = function (file) {
Upload.upload({
url: '/api/admin/photos',
headers : {
'Content-Type': 'multipart/form-data'
},
data: {file: file}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
$scope.myPic = resp.config.data.file.name;
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
}]);
HTML
<form ng-controller="adminController" name="form" enctype="multipart/form-data">
Single Image with validations
<div class="button btn btn-default" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100"
>Select</div>
<button type="submit" ng-click="submit()">submit</button>
</form>
<p>{{ myPic }} </p>
<ul ng-repeat="picture in myPic">
<li>{{ picture }} </li>
</ul>
我认为您不应该 return 来自服务器的文件,实际上您可以通过 $scope.file:
在客户端检测文件详细信息
http://jsfiddle.net/6jh0sb5n/3/
<input type="file" ngf-select ng-model="file" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" ng-change="getFileDetail()">
.then(function (resp) {
alert('filename:' + $scope.file.name + ',size: ' + $scope.file.size);
}
我正在使用 Multer 上传照片。我的后端是 Node,我能够成功上传图像。当我上传图片时,它会通过 json 发送回 Angular。我成功获得了响应,但在控制台日志中我看到的只是 [object Object]
并且我无法在视图中看到响应。我尝试 stringify
但没有运气。收到回复总是让我失望,我很想最终理解这一点。在我的 HTML 中什么也没有出现。
来自Node.js
的回应apiRoutes.post('/admin/photos',upload.single('file'),function(req,res){
console.log(req.file);
res.json(req.file);
});
Angular上传
$scope.submit = function() {
if ($scope.file) {
$scope.upload($scope.file);
}
};
// upload on file select or drop
$scope.upload = function (file) {
Upload.upload({
url: '/api/admin/photos',
headers : {
'Content-Type': 'multipart/form-data'
},
data: {file: file}
}).then(function (resp) {
console.log('Success ' + resp.config.data.file.name + 'uploaded. Response: ' + resp.data);
$scope.myPic = resp.config.data.file.name;
}, function (resp) {
console.log('Error status: ' + resp.status);
}, function (evt) {
var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
});
};
}]);
HTML
<form ng-controller="adminController" name="form" enctype="multipart/form-data">
Single Image with validations
<div class="button btn btn-default" ngf-select ng-model="file" name="file" ngf-pattern="'image/*'"
ngf-accept="'image/*'" ngf-max-size="20MB" ngf-min-height="100"
>Select</div>
<button type="submit" ng-click="submit()">submit</button>
</form>
<p>{{ myPic }} </p>
<ul ng-repeat="picture in myPic">
<li>{{ picture }} </li>
</ul>
我认为您不应该 return 来自服务器的文件,实际上您可以通过 $scope.file:
在客户端检测文件详细信息http://jsfiddle.net/6jh0sb5n/3/
<input type="file" ngf-select ng-model="file" name="file"
accept="image/*" ngf-max-size="2MB" required
ngf-model-invalid="errorFiles" ng-change="getFileDetail()">
.then(function (resp) {
alert('filename:' + $scope.file.name + ',size: ' + $scope.file.size);
}