Angularjs 如何在没有文件输入表单元素的情况下提交图像？

我正在使用angular.js和一个常规的post api来提交图像。图像来自手机摄像头，而不是文件输入字段。如何在没有提交post请求的情况下打包图像文件数据

您只需将图像作为base64字符串发布即可。下面是我创建的一个应用程序的示例

$scope.Data = {
            DocTypeGID: 0,
            ATypeGID: 1017,
            Value: '',
            Image: null,
            isCompressed: '',
        };
 //sets Data.Image to a base 64 string
        $scope.takePhoto = function () {
            $ionicScrollDelegate.scrollTop();
            console.log('fired camera');
            $scope.uploadList = false;
            $ionicPlatform.ready(function () {
                var options = {
                    quality: 100,
                    destinationType: Camera.DestinationType.DATA_URL,
                    sourceType: Camera.PictureSourceType.CAMERA,
                    allowEdit: false,
                    encodingType: Camera.EncodingType.PNG,
                    targetWidth: 800,
                    targetHeight: 1100,
                    popoverOptions: CameraPopoverOptions,
                    saveToPhotoAlbum: false
                };
                $cordovaCamera.getPicture(options).then(function (imageData) {
                    $ionicLoading.show({
                        template: 'Processing Image',
                        duration: 2000
                    });
                    $scope.image = "data:image/png;base64," + imageData;
                    if (ionic.Platform.isAndroid() === true) {
                        $scope.Data.Image = LZString.compressToUTF16($scope.image);
                        $scope.Data.isCompressed = 1;
                    } else {
                        $scope.Data.Image = $scope.image;
                        $scope.Data.isCompressed = 0;
                    }
                    if ($scope.tutorial) {
                        $scope.showAlert("Instructions: Step 3", '<div class="center">Now that you have taken a photo of the POD form, you must upload it to the server. Press the upload doc button in the bottom right of the screen.</div>');
                    }
                    $scope.openModal();
                }, function (err) {
                    console.log(err);
                });
            }, false);
        };

$scope.UploadDoc = function () {
            var req = {
                method: 'POST',
                url: ffService.baseUrlAuth + 'cc/upload',
                headers: {
                    'x-access-token': ffService.token
                },
                data: $scope.Data
            };
            if ($scope.Data.Image === null || $scope.Data.Value === '') {
                $scope.showAlert("Uh Oh!", '<div class="center">Please take a photo of your document before attempting an upload.</div>');
            } else if ($scope.Data.DocType === 0) {
                $scope.showAlert("Uh Oh!", '<div class="center">Please select a doc type for your document before uploading.')
            } else {
                $http(req).success(function (data, status, headers, config) {
                    localStorage.setItem('tutorial', false);
                    $scope.tutorial = false;
                    $scope.getUploads($scope.PODOrder.OrderNo);
                    $scope.showAlert("Success!", '<div class="center">Your Document has been successfully uploaded!</div>');
                    $scope.uploadList = true;
                }).error(function (data, status, headers, config) {
                    $rootScope.$broadcast('loading:hide');
                    $scope.showAlert("Something went wrong!", '<div class="center">Please make sure you have an internet connection and try again.</div>');
                }).then(function (data, status, headers, config) {
                    $scope.Data.Image = null;
                });
            }
        };

$scope.Data={
DocTypeGID:0，
ATypeGID:1017，
值：“”，
图像：空，
已压缩：“”，
};
//将Data.Image设置为基64字符串
$scope.takePhoto=函数（）{
$ionicScrollDelegate.scrollTop（）；
console.log（'fired camera'）；
$scope.uploadList=false；
$ionicPlatform.ready（函数（）{
变量选项={
质量：100，
destinationType:Camera.destinationType.DATA\u URL，
源类型：Camera.PictureSourceType.Camera，
允许：错误，
编码类型：Camera.encodingType.PNG，
目标宽度：800，
目标灯：1100，
popoverOptions:CamerapoverOptions，
saveToPhotoAlbum:false
};
$cordovaCamera.getPicture（选项）。然后（函数（imageData）{
$ionicLoading.show({
模板：“正在处理图像”，
持续时间：2000年
});
$scope.image=“数据：图像/png；base64”+imageData；
if（ionic.Platform.isAndroid（）==true）{
$scope.Data.Image=LZString.compressToUTF16（$scope.Image）；
$scope.Data.isCompressed=1；
}否则{
$scope.Data.Image=$scope.Image；
$scope.Data.isCompressed=0；
}
if（$scope.tutorial）{
$scope.showarter（“说明：步骤3”，“现在您已经拍摄了POD表单的照片，必须将其上载到服务器。按屏幕右下角的上载文档按钮”）；
}
$scope.openModal（）；
}，函数（err）{
控制台日志（err）；
});
}，假）；
};
$scope.UploadDoc=函数（）{
var req={
方法：“POST”，
url:ffService.baseUrlAuth+“抄送/上传”，
标题：{
“x-access-token”：ffService.token
},
数据：$scope.data
};
如果（$scope.Data.Image==null | |$scope.Data.Value===“”）{
$scope.showarter（“哦！”，“请在尝试上传之前为您的文档拍照。”）；
}else if（$scope.Data.DocType==0）{
$scope.showarter（“哦！”，“请在上载之前为文档选择一种文档类型”。）
}否则{
$http（req）.success（函数（数据、状态、标题、配置）{
setItem（'tutorial'，false）；
$scope.tutorial=false；
$scope.getUploads（$scope.PODOrder.OrderNo）；
$scope.showarter（“成功！”，“您的文档已成功上载！”）；
$scope.uploadList=true；
}).error（函数（数据、状态、标题、配置）{
$rootScope.$broadcast（'loading:hide'）；
$scope.showarter（“出现问题！”，“请确保您有internet连接，然后重试。”）；
}).then（函数（数据、状态、标题、配置）{
$scope.Data.Image=null；
});
}
};

使用dropzone js

---

dropzone js允许您通过ajax/submit页面拖放上传，在android设备上，您可以压缩字符串以保存一些数据，在iphone上，我还没有找到实现这一点的方法。