我使用MEAN-Stack上传带有标签的图像。 虽然发布对我有用,但我无法获取更新/放置部分的表单数据。我被困在我的路由文件中的这一部分:
router.put('/update/:uuid/:filename', upload.single(), function (req, res, next) {
// console.log("_______________________req.FILES_______________________________________");
// console.log(req.files);
// console.log("_______________________req_______________________________________");
// console.log(req);
console.log("_______________________req.BODY_______________________________________");
console.log(req.body);
console.log(req.user);
Upload.findOneAndUpdate({
'file.filename': req.params.uuid,
'file.originalname': req.params.filename
}, {
// $set: {
// tags: req.body.tags
// }
},
function (err, upload) {
if (err) next(err);
else {
res.send(upload);
}
});
});
我在控制台中得到这样的东西。
_______________________req.BODY_______________________________________
{ '0': { _id: '593bff833ffbe41a523d03ad',
name: 'asdasdasd',
tags: { info: 'TestTag, Bla' },
created: '2017-06-10T14:17:39.501Z',
file:
{ fieldname: 'file',
originalname: 'ZzpXc6c.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
destination: 'uploads/',
filename: '6fca88b03e88b7e72a751d7a44e9ed04',
path: 'uploads/6fca88b03e88b7e72a751d7a44e9ed04',
size: '303915' },
__v: '0',
'$hashKey': 'object:4' } }
这是形式
<div ng-controller="formCtrlUpdate" id="example-form" action="#">
<h2>Update</h2>
<ul>
<li ng-repeat="upload in image">
<a ng-href='{{upload.file.path + "/" + upload.file.originalname}}'>{{upload.file.originalname}}</a></br>
<img ng-src='{{upload.file.path + "/" + upload.file.originalname}}' />
<form ng-submit="submit()">
<legend>Update file here:</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name" ng-model="upload.name" />
<br/>
<label for="CreatorArtist">Artist:</label>
<input type="text" name="CreatorArtist" id="CreatorArtist" class="demo-default" ng-model="upload.tags.CreatorArtist" />
<br/>
<label for="info">Image Description:</label>
<input type="text" name="info" id="info" ng-model="upload.tags.info" />
<br/>
<input type="submit" value="Update" />
</form>
</li>
</ul>
</div>
仅供参考,这是工作上传部分
路线
router.post('/', upload.single('file'), function (req, res, next) {
console.log(req.body);
var newUpload = {
name: req.body.name,
tags: req.body.tags,
created: Date.now(),
file: req.file
};
Upload.create(newUpload, function (err, next) {
if (err) {
next(err);
} else {
res.send(newUpload);
}
});
});
上传表格
<div ng-controller="formCtrl">
<h2>Upload</h2>
<h1>Ein Test Upload</h1>
<form ng-submit="submit()">
<legend>Upload a new file here:</legend>
<label for="name">Name:</label>
<input type="text" name="name" id="name" ng-model="upload.name" required/>
<br/>
<label for="CreatorArtist">Artist:</label>
<input type="text" name="CreatorArtist" id="CreatorArtist" class="demo-default" ng-model="upload.tags.CreatorArtist" required/>
<br/>
<label for="info">Image Description:</label>
<input type="text" name="info" id="info" ng-model="upload.tags.info" required/>
<br/>
<label for="file">File:</label>
<input type="file" class="imgInp" name="file" id="file" ng-model="upload.file" ngf-select ngf-max-size="25MB" required/>
<br/>
<input type="submit" value="Submit" />
</form>
</div>
和控制器
var app = angular.module('fileUpload', [
'ngFileUpload',
'ngResource',
'ngRoute'
]);
app.config(function ($routeProvider, $locationProvider) {
$locationProvider.hashPrefix('');
$routeProvider.
when('/', {
templateUrl: '../views/home.html'
}).
when('/uploadForm', {
templateUrl: '../views/uploadForm.html'
}).
when('/updateForm', {
templateUrl: '../views/updateForm.html'
}).
otherwise('/');
app.config(['$qProvider', function ($qProvider) {
$qProvider.errorOnUnhandledRejections(false);
}]);
$scope.submit = function () {
// console.log($scope.upload)
Upload.upload({
url: '/uploads',
method: 'post',
data: $scope.upload
}).then(function (response) {
console.log(response.data);
$scope.all.push(response.data);
$scope.upload = {};
console.log("Uploaded")
})
}
}]);
app.controller('formCtrlUpdate', ['$http', 'Upload', '$scope', '$routeParams', function ($http, Upload, $scope, $routeParams) {
console.log($routeParams);
$http.get('/uploads/update/' + $routeParams.uuid + '/' + $routeParams.filename).then(function (response) {
console.log(response.data);
$scope.image = response.data;
console.log("Beginning");
});
$scope.submit = function () {
console.log($scope.image)
// console.log("Update")
Upload.upload({
url: '/uploads/update/' + $routeParams.uuid + '/' + $routeParams.filename,
method: 'put',
// data: {
// _method: 'PUT',
// data: $scope.image
// }
data: $scope.image
}).then(function (response) {
// console.log(response.data);
$scope.all.push(response.data);
// $scope.image = {};
console.log("Update")
})
}
}]);
我现在的问题是如何在我的 req.body 中获取表单数据?像 req.body.0 这样的东西是不可能的。我可以使用哪些参数访问我的 POST/上传部分中的内容?
您可以使用req.body[0]获取表单数据,它将显示您在单击更新按钮时传递的所有表单数据。
结果:
{ _id: '593bff833ffbe41a523d03ad',
name: 'asdasdasd',
tags: { info: 'TestTag, Bla' },
created: '2017-06-10T14:17:39.501Z',
file:
{ fieldname: 'file',
originalname: 'ZzpXc6c.jpg',
encoding: '7bit',
mimetype: 'image/jpeg',
destination: 'uploads/',
filename: '6fca88b03e88b7e72a751d7a44e9ed04',
path: 'uploads/6fca88b03e88b7e72a751d7a44e9ed04',
size: '303915' },
__v: '0',
'$hashKey': 'object:4'
}
或
如果你想获得像name这样的特定字段,你可以使用req.body[0].name