使用Phonegap上传图像:InvalidCastException

时间:2012-12-17 21:23:28

标签: javascript cordova

我正在尝试使用Phonegap将文件上传到我的服务器。当错误说:

时,我现在卡住了
InvalidCastException
Failed to deserialize WP7CordovaClassLib.Cordova.Commands.FileTransfer+UploadOptions[] with JSON value :: ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://server.myapp.srv.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"]

HTML + Javascript

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <title>File Transfer Example</title>

</head>
<body>
    <button id="uploadPhotoButton">Upload a Photo</button>

    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" src="js/camera.js"></script>
    <script type="text/javascript">

    $(document).one("pause", function () {
        console.log('Paused.');
    });

    $(document).one("resume", function () {
        console.log('Resumed.');
    });

    $(document).one("deviceready", function () {
        console.log('Device is ready.');
    });

    $(document).one("backbutton", function () {
        console.log('Back button pressed.');
    });

    $(document).ready(function () {
        console.log('DOM is ready.');

        $(document).on("click", "#uploadPhotoButton", function (e) {
            console.log('clicked button');
            getImage();
        });


        function getImage() {
            // Retrieve image file location from specified source
                navigator.camera.getPicture(uploadPhoto, function (message) {
                    alert('get picture failed');
                }, {
                    quality: 50,
                    destinationType: navigator.camera.DestinationType.FILE_URI,
                    sourceType: navigator.camera.PictureSourceType.PHOTOLIBRARY
                }
            );

        }

        function uploadPhoto(imageURI) {
            var options = new FileUploadOptions();
            options.fileKey = "file";
            options.fileName = imageURI.substr(imageURI.lastIndexOf('/') + 1);
            options.mimeType = "image/jpeg";

            var params = new Object();
            params.value1 = "test";
            params.value2 = "param";

            options.params = params;
            options.chunkedMode = false;

            var ft = new FileTransfer();
            ft.upload(imageURI, "http://my.server.co.nz/pages/fileupload", win, fail, options);
        }

        function win(r) {
            console.log("Code = " + r.responseCode);
            console.log("Response = " + r.response);
            console.log("Sent = " + r.bytesSent);
            alert(r.response);
        }

        function fail(error) {
            alert("An error has occurred: Code = " = error.code);
        }
    });

    </script>
    </body>
</html>

完整的错误日志。

GapBrowser_Navigated :: /app/www/index.html#/app/www/uploadtest.html
Log:"clicked button"
The thread '<No Name>' (0xf55026a) has exited with code 0 (0x0).
The thread '<No Name>' (0xe3f0326) has exited with code 0 (0x0).
INFO: AppDeactivated
INFO: AppActivated
Log:"Paused."
The thread '<No Name>' (0xf1a02e6) has exited with code 0 (0x0).
Log:"Resumed."
The thread '<No Name>' (0xf2a01d2) has exited with code 0 (0x0).
options = ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://my.server.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"]
A first chance exception of type 'System.InvalidCastException' occurred in System.ServiceModel.Web.dll
A first chance exception of type 'System.InvalidCastException' occurred in System.ServiceModel.Web.dll
InvalidCastException
Failed to deserialize WP7CordovaClassLib.Cordova.Commands.FileTransfer+UploadOptions[] with JSON value :: ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://server.myapp.srv.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"]
A first chance exception of type 'System.NullReferenceException' occurred in Lion.MyApp.dll
The thread '<No Name>' (0xfdc025e) has exited with code 0 (0x0).
Log:"Error in error callback: FileTransfer1325332352 = ReferenceError: Invalid left-hand side in assignment"
The thread '<No Name>' (0xfa60286) has exited with code 0 (0x0).

有没有人知道如何使这项工作?

谢谢!

w ^

4 个答案:

答案 0 :(得分:1)

我认为你正在改变你的选择价值。您需要传递JSON还是实际对象?

现在您正在传递一个包含文本的数组。

options = ["{\"filePath\":\"/CapturedImagesCache/PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"server\":\"http://my.server.co.nz/pages/fileupload\",\"fileKey\":\"file\",\"fileName\":\"PhotoChooser-51766419-c657-46db-a53d-f09bee300a89.jpg\",\"mimeType\":\"image/jpg\",\"params\":\"value1=test&value2=param\",\"chunkedMode\":false}"]

错误似乎涉及反序列化问题。

答案 1 :(得分:1)

在$(document).ready的内联函数调用之外放置你的getImage,uploadImage,win,fail。

对win和fail的引用实际上是关闭,当手机间隙尝试直接访问这些方法时,它会将其视为null。 Phonegap可能期望在函数内部使用全局函数而不是隐藏函数。

PhoneGap执行其代码输出端javascript上下文,真正的javascript方式可能无法正常使用phonegap。

答案 2 :(得分:0)

我遇到了与你类似的问题。我解决了这个问题,将mimeType参数更改为'text / plain'。

你使用params发送?如果它是假的我认为你需要发送空的参数。

答案 3 :(得分:0)

之前我遇到过这个问题,首先尝试在html中准备图像,不要直接从导航器中取出,它可能无法将拍下的照片保存在现金中;)

在我的解决方案中,我想有一个id ='camera_image'的图像标记

  

img id ='camera_image'...

然后我在其中设置图像的所有变量并上传它(如下面的代码所示)。

这是我使用的两个功能:

function takephoto(){     

      navigator.camera.getPicture(      
        function(uri){
             $('#camera_image').show();
             var img = document.getElementById('camera_image');
             img.style.visibility = "visible"; 
             img.style.display = "block";
             img.src = uri;
             uploadPhoto(img);                    
             alert("Success");
         },
         function(e) {
             console.log("Error getting picture: " + e);
         },
         {
             quality: 50, 
             destinationType: navigator.camera.DestinationType.FILE_URI
         });

        // Get URI of picture to upload 
        var img = document.getElementById('camera_image');
        var imageURI = img.src;
        if (!imageURI || (img.style.display == "none")) {
                alert("Take picture or select picture from library first.");
                return;
        }
}

用于选择现有照片:

 function choosephoto(){
    navigator.camera.getPicture(
        function(uri) {
            $('#camera_image').show();
            var img = document.getElementById('camera_image');
            img.style.visibility = "visible"; 
            img.style.display = "block";
            img.src = uri;
            uploadPhoto(img);
        },
        function(e) {
            console.log("Error getting picture: " + e);
        },
        {
             quality: 50, 
             destinationType: navigator.camera.DestinationType.FILE_URI, 
             sourceType: navigator.camera.PictureSourceType.SAVEDPHOTOALBUM
        });             

        // Get URI of picture to upload
        var img = document.getElementById('camera_image');
        var imageURI = img.src;
        if (!imageURI || (img.style.display == "none")) {
            alert("please select a pic first");
            return;
        }

  }

在上传功能中:    function uploadPhoto(img){        imageURI = img.src ...

ps:对不起我的代码格式化,它不能很好地解决。