Question

我使用MEAN-Stack上传带有标签的图像。虽然发布对我有用，但我无法获得更新/放置部分的表单数据。我在路线文件中停留在这个部分：

＆＃13;

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);
            }
        });
});

＆＃13;

我在控制台中得到这样的东西。

_______________________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' } }

这是表格

＆＃13;

<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>

＆＃13;

仅供参考，这是工作上传部分

路线

＆＃13;

    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);
        }
    });

});

＆＃13;

上传表格

＆＃13;

<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>

＆＃13;

和控制器

＆＃13;

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")
        })
    }
}]);

＆＃13;

我现在的问题是如何在我的req.body中获取表单数据？像req.body.0这样的东西是不可能的。我可以使用哪些参数访问POST / Upload部分中的内容？

Answer 1

您可以使用req.body [0]获取表单数据。它将显示您单击更新按钮时传递的所有表单数据。结果： {_id：＆＃39; 593bff833ffbe41a523d03ad＆＃39;，名称：＆＃39; asdasdasd＆＃39;，标签：{info：＆＃39; TestTag，Bla＆＃39; }，创建：＆＃39; 2017-06-10T14：17：39.501Z＆＃39;，文件： {fieldname：＆＃39; file＆＃39;，原名：＆＃39; ZzpXc6c.jpg＆＃39;，编码：＆＃39; 7bit＆＃39;， mimetype：＆＃39; image / jpeg＆＃39;，目的地：＆＃39;上传/＆＃39;，文件名：＆＃39; 6fca88b03e88b7e72a751d7a44e9ed04＆＃39;，路径：＆＃39;上传/ 6fca88b03e88b7e72a751d7a44e9ed04＆＃39;，尺寸：＆＃39; 303915＆＃39; }， __v：＆＃39; 0＆＃39;，＆＃39; $ hashKey＆＃39;：＆＃39;对象：4＆＃39; } 要么如果你想得到像名字这样的特定字段，你可以使用req.body [0] .name

如何获得req.body MEAN-Stack

1 个答案: