Cordova 5.1.1中的FormData与摄像机操作不起作用

pexxcrt2 于 2022-11-15 发布在其他

关注(0)|答案(1)|浏览(237)

我正在尝试使用Cordova相机插件来拍摄照片。在拍摄照片后，我创建了一个新的FormData对象来附加图像。我将相机创建的Base64图像转换为Blob，然后将其附加到新的FormData对象。不幸的是，Blob从未被附加。
我有一个Nexus 5运行Android 5.1.1。我使用Cordova 5.1.1和CordovaLib 4.0.2构建了一个应用程序。我安装了以下插件：
cordova插件设备cordova插件应用程序浏览器cordova插件相机cordova插件文件cordova插件文件传输cordova插件白名单
同样的问题也发生在Cordova 4.3.1和CordovaLib android 3.7.2上。
下面是我用来激活设备摄像头的代码片段。

navigator.camera.getPicture(
 onSuccess,
 onFailure, 
 {
   quality: 50,
   destinationType: Camera.DestinationType.DATA_URL,
   cameraDirection: Camera.Direction.FRONT
 }
);

以下是成功和失败函数。

function onSuccess(URI) {
  var the_file = new Blob([window.atob(URI)],  {type: 'image/jpeg', encoding: 'utf-8'});
  try {
    var fd = new FormData();
    fd.append('Filedata', the_file, "selfie.jpg");
  } catch (e) {
    throw e;
  }
  console.log(the_file.size);
  console.log(the_file.type);
  console.log(JSON.stringify(fd));
}
function onFailure(e) {
  console.log(e);
}

当我运行这段代码时，我在Android Studio中监控控制台输出。我可以看到_file.size和_file.type是正确的。但是，FormData的“JSON.stringify”显示了一个空Object“{}"。
我知道我应该在Cordova中使用FILE_URL而不是DATA_URL来保存内存，但是我现在只需要调试这个FormData问题。一旦我让这个示例运行起来，那么我将在将我的应用程序投入生产之前重构我的代码以使用FILE_URL。我将重点讨论为什么FormData.append函数对我正在创建的Blob不起作用。

cordova

来源：https://stackoverflow.com/questions/31434099/formdata-in-cordova-5-1-1-with-camera-operation-not-working

1条答案

按热度按时间

kcrjzv8t1#

经过更多的测试，我发现FormData在Cordova 5.1.1中不能按预期工作。我还发现它在Cordova 4.2.3和5.0中不一致。
在cordova中处理从摄像机上传文件的解决方案是使用FileTransfer对象和文件系统。
下面是一个修改过的onSuccess函数，它演示了如何从Camera中提取图像并将其上传到服务器。

onSuccess: function (URI) {
    window.resolveLocalFileSystemURL(URI, function (fileEntry) {
            console.log("Got URI");
            console.log(JSON.stringify(fileEntry));
            fileEntry.file(function (fileInput) {
                console.log(fileInput.localURL);
                var ft = new FileTransfer();

                var options = new FileUploadOptions();
                options.fileKey = "Filedata";
                options.fileName = "image.jpg";
                options.mimeType = "image/jpeg";

                ft.upload(
                    fileInput.localURL,
                    encodeURI("http://www.posttestserver.com/post.php?dir=CordovaExample"),
                    function (r) {
                        console.log("Code = " + r.responseCode);
                        console.log("Response = " + r.response);
                        console.log("Sent = " + r.bytesSent);
                    },
                    function (e) {
                        alert("An error has occurred: Code = " + error.code);
                        console.log("upload error source " + error.source);
                        console.log("upload error target " + error.target);
                    },
                    options,
                    true
                );
            }
    }
}

需要指出的重要一点是，我们并不使用从Camera发送到onSuccess函数的原始URL，而是从window.resolveLocalFileSystemURL函数返回的FileEntry对象中提取实际的文件系统URL。
不幸的是，FormData的问题没有在我能找到的任何地方被记录。我偶然发现在页面底部的 cordova FileTransfer插件https://github.com/apache/cordova-plugin-file-transfer的向后兼容性说明中有点触及URL与localURL。
FileEntry.toURL（）和DirectoryEntry.toURL（）返回格式为cdvfile：//localhost/persistent/path/to/file的文件系统URL，它可以用来代替download（）和upload（）方法中的绝对文件路径。
我在使用FileReader打开保存的照片并将其附加到FormData时也遇到了问题。我认为新Cordova中的FormData API存在问题。我也注意到了过去版本中API的不一致性。我的建议是避免使用FormData，并使用上面概述的技术从Cordova的相机或文件系统中获取图像。

赞(0）回复(0）举报 2022-11-15

我来回答

Cordova 5.1.1中的FormData与摄像机操作不起作用

1条答案

相关问题

热门标签

最新问答