Angularjs ng cordova filetransfer插件中的文件上载错误代码1

Angularjs ng cordova filetransfer插件中的文件上载错误代码1,angularjs,cordova,ionic-framework,visual-studio-2015,Angularjs,Cordova,Ionic Framework,Visual Studio 2015,我正在使用visual studio 2015 rc的Apache cordova模板和ionic框架开发一个跨平台移动应用程序。该应用程序的主要功能是将图像从摄像头上传到远程主机。 为此,我在angular controller中使用文件传输插件,在服务器端使用RestApi(ASP.net webapi) 但在不断测试的过程中,我发现了这个错误 例外情况: 错误: { “代码”:1,“源”:“api/fileupload/uploadfile”,“目标”:“api/fileupload/up

我正在使用visual studio 2015 rc的Apache cordova模板和ionic框架开发一个跨平台移动应用程序。该应用程序的主要功能是将图像从摄像头上传到远程主机。 为此,我在angular controller中使用文件传输插件,在服务器端使用RestApi(ASP.net webapi)

但在不断测试的过程中,我发现了这个错误

例外情况:

错误: { “代码”:1,“源”:“api/fileupload/uploadfile”,“目标”:“api/fileupload/uploadfile”,“http_状态”:null,“正文”:null,“异常”:{“描述”:访问 被拒绝“…}

这是我的控制器代码

.controller("ImageUploadCtrl", function($scope, $cordovaFileTransfer) {

    $scope.upload = function() {
        var options = {
            fileKey: "file",
            fileName: "image.jpg",
            chunkedMode: false,
            mimeType: "image/jpeg"
            uploadOptions.httpMethod = "POST";
                uploadOptions.headers = {
                    Connection:"close"
                };
        };
        $cordovaFileTransfer.upload("api/fileupload/uploadfile", "/images/image.jpg", options).then(function (result) {
            console.log("SUCCESS: " + JSON.stringify(result.response));
        }, function (err) {
            console.log("ERROR: " + JSON.stringify(err));
        }, function (progress) {
            // constant progress updates
        });
    }

})
 public void UploadFile()
        {
            if (HttpContext.Current.Request.Files.AllKeys.Any())
            {
                // Get the uploaded image from the Files collection
                var httpPostedFile = HttpContext.Current.Request.Files["file"];

                if (httpPostedFile != null)
                {
                    // Validate the uploaded image(optional)

                    // Get the complete file path
                    var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/UploadedFiles"), httpPostedFile.FileName);

                    // Save the uploaded file to "UploadedFiles" folder
                    httpPostedFile.SaveAs(fileSavePath);
                }
            }
        }
这是我的Api代码

.controller("ImageUploadCtrl", function($scope, $cordovaFileTransfer) {

    $scope.upload = function() {
        var options = {
            fileKey: "file",
            fileName: "image.jpg",
            chunkedMode: false,
            mimeType: "image/jpeg"
            uploadOptions.httpMethod = "POST";
                uploadOptions.headers = {
                    Connection:"close"
                };
        };
        $cordovaFileTransfer.upload("api/fileupload/uploadfile", "/images/image.jpg", options).then(function (result) {
            console.log("SUCCESS: " + JSON.stringify(result.response));
        }, function (err) {
            console.log("ERROR: " + JSON.stringify(err));
        }, function (progress) {
            // constant progress updates
        });
    }

})
 public void UploadFile()
        {
            if (HttpContext.Current.Request.Files.AllKeys.Any())
            {
                // Get the uploaded image from the Files collection
                var httpPostedFile = HttpContext.Current.Request.Files["file"];

                if (httpPostedFile != null)
                {
                    // Validate the uploaded image(optional)

                    // Get the complete file path
                    var fileSavePath = Path.Combine(HttpContext.Current.Server.MapPath("~/UploadedFiles"), httpPostedFile.FileName);

                    // Save the uploaded file to "UploadedFiles" folder
                    httpPostedFile.SaveAs(fileSavePath);
                }
            }
        }
需要帮助。欢迎任何建议。
关于

我正在为一家公司开发的应用程序也有同样的问题,我们无法让文件加载程序工作,我们所做的只是将图像作为base64字符串发布到我们的服务器上。然后你可以简单地从数据库中提取字符串并将其显示在div中。我们使用了NgCordova摄像头,然后只需传入拍摄照片中的数据功能。在android(非ios)设备上,您可以使用lz-string.js压缩字符串。在ios上,我们还必须将图像制作为png。如果您的应用程序只需要处理上传图像,这是一种简单的方法

$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.on('')
                }, 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 {
                $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.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.on(“”)
},函数(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(“哦!”,“请在尝试上传之前为您的文档拍照。”);
}否则{
$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;
});
}
};
最后,这个简单的解决方案适合我

更新 更改App controller和Webapi controller中的代码后 每件事都像一个魔咒一样工作,图像开始通过API保存在服务器上

更改代码 我在应用程序控制器选项中添加以下行:

 uploadOptions.httpMethod = "POST";
                    uploadOptions.headers = {
                        Connection:"close"
                    };
并在WebApi控制器中更改此行

var httpPostedFile = HttpContext.Current.Request.Files["file"];
我还可以在API中启用。


谢谢。

谢谢你的回答。你能发布服务器端图像接收代码吗?再次感谢。我只是前端的人,所以让我看看是否能从后端开发人员那里获得。我非常确定这只是一个节点/快报发布路径,它接收post数据并将其推送到数据库表中。谢谢Jess Patton,我终于得到了它现在,我的下一个任务将开始如何下载图片。如果您对此有任何了解,请与我们分享。很高兴您能使用它!您是否使用了我的方法或文件上载程序,使用我的方法,您只需执行一个get请求,返回base64字符串并以