如何将摄像头拍摄的照片分配到angularjs中的输入类型文件？

Question

我的要求是从移动相机拍摄照片并将其传递给web api。我使用ng-cordova插件通过相机拍照。现在我想将该照片发送到request.files中的web api。 我已经为实现既定目的编写了此代码。但是我在request.body中获取了一个文件 告诉我我做错了什么

这是我的代码

html文件：

<ion-view ng-controller="CameraCtrl as cm">
     <ion-nav-buttons side="left">
        <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
        </button>
      </ion-nav-buttons>
    <ion-content class="has-header padding">
      <form>
        <div id="uploaddesigndiv" class="list card">
            <div class="item">
                <div class="fileUpload">
                    <button class="button  button-assertive" ng-click="cm.takePicture()">Take Picture from Camera</button>
                </div>
                <img id="Selectedimage" alt="Not an image" ng-show="cm.imgSrc !== undefined" ng-src="{{cm.imgSrc}}">
            </div>
            <div class="item item-body"  id="uploadtags">
                <ion-list>
                  <ion-item class="item-stable"
                            ng-click="toggleGroup(2)"
                            ng-class="{active: isGroupShown(2)}">

                        Tags
                    <i class="icon togglemore" ng-class="isGroupShown(2) ? 'ion-chevron-up' : 'ion-chevron-down'"></i>
                  </ion-item>
                    <ion-item  class="item-accordion" ng-show="isGroupShown(2)" ng-repeat="tag in tagList">
                    {{tag.name}} <input ng-model="tag.check" type="checkbox" ng-disabled="tag.disable">
                  </ion-item>
                </ion-list>
                <textarea ng-model="form.form.desc" class="item-input" placeholder="description" rows="5"></textarea>
                <input ng-click="upload()" type="submit" class="button button-assertive" name="upload" value="Upload">
            </div>
        </div>
      </form>
      <div class="space"></div>
    </ion-content>
</ion-view>

控制器代码：

(function () {
    'use strict';

    app.controller('CameraCtrl', ['$cordovaCamera', '$scope','$rootScope','$http', CameraCtr]);

    function CameraCtr($cordovaCamera, $scope,$rootScope,$http) {
        var vm = this;

        vm.takePicture = function () {
            var options = { 
                quality : 75, 
                destinationType : Camera.DestinationType.DATA_URL, 
                sourceType : Camera.PictureSourceType.CAMERA, 
                allowEdit : true,
                encodingType: Camera.EncodingType.JPEG,
                targetWidth: 300,
                targetHeight: 300,
                popoverOptions: CameraPopoverOptions,
                saveToPhotoAlbum: false
            };

            $cordovaCamera.getPicture(options).then(function (imageData) {
                // Success! Image data is here
                vm.imgSrc = "data:image/jpeg;base64," + imageData;
            }, function (err) {
                alert("An error occured: " + err);
            });
        };
    
       $scope.form={};
       $scope.tagList=[{name:"Common",check:true,disable:true}];
       
       var ogList=["Hand Design", "Feet Design","Indian","Pakistani","Moghlai","Arabic","Indo-Arabic","Bridal"];
       
       for(var i=0;i<ogList.length;i++)
       {
           $scope.tagList.push({name:ogList[i],check:false});
       }
       
        var _upload = function (photo) {
            alert("photo " , photo);
            var tagName=[];
             for(var i=0;i<$scope.tagList.length;i++)
       {
           if($scope.tagList[i].check)
           tagName.push($scope.tagList[i].name);
       }
            
            
            console.log("$scope.tagList : ",$scope.tagList);
            console.log("tagName : ",tagName);

            var formData = new FormData();
            console.log("userID"+$rootScope.sessionMyID);
            formData.append("userPhoto", photo);
            formData.append("userID", $rootScope.sessionMyID);
            formData.append("desc", $scope.form.form.desc);
            formData.append("tagName", tagName);
            
            //service call
            return $http.post('http://192.168.2.135:3000/api/photo', formData, {
                transformRequest: angular.identity,
                headers: { 'Content-Type': undefined }
            }).then(function (response) {
                                alert("Your image uploaded Successfully...");
                return response;

            });
       };
        $scope.upload = function () {
            console.log("$scope.fileUpload", $scope.fileUpload);
            _upload(vm.imgSrc);
        };
    };
})();

在服务器端，这是我收到的请求对象

body: 
   { userPhoto: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCADhASwDASIAAhEBAxEB/8QAHw................./2Q==',
     userID: '55041c5ec20ec607edaf7729',
     desc: 'Ghhhj',
     tagName: 'Common' },
  files: {},
  read: [Function],
  route: { path: '/photo', stack: [ [Object] ], methods: { post: true } } }