Cordova 5.1.1 中的 FormData 相机操作不起作用

Question

我正在尝试使用 Cordova 相机插件拍照。拍完照片后，我创建了一个新的 FormData 对象来附加图像。我将相机创建的 Base64 图像转换为 Blob，然后再将其附加到新的 FormData 对象。不幸的是，Blob 从未被附加。

我有一个 Nexus 5 运行ning Android 5.1.1。我使用 Cordova 5.1.1 和 CordovaLib 4.0.2 构建了一个应用程序。我安装了以下插件：

cordova-插件设备 cordova-plugin-inappbrowser 科尔多瓦插件相机科尔多瓦插件文件科尔多瓦插件文件传输科尔多瓦插件白名单

同样的问题出现在 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 中监视控制台输出。我可以看到 the_file.size 和 the_file.type 是正确的。但是，FormData 的 "JSON.stringify" 显示一个空对象“{}”。

我知道我应该在 Cordova 中使用 FILE_URL 而不是 DATA_URL 来节省内存，但我现在只需要调试这个 FormData 问题。一旦我使这个示例工作，然后我将重构我的代码以使用 FILE_URL，然后再将我的应用程序投入生产。我想重点说明为什么 FormData.append 函数对我正在创建的 Blob 不起作用。任何见解将不胜感激！

谢谢，亚伦

Answer 1

经过更多测试后，我发现 FormData 在 Cordova 5.1.1 中无法按预期工作。我还在 Cordova 4.2.3 和 5.0 中发现了不一致之处。

在 cordova 中处理从相机上传文件的解决方案是使用 FileTransfer 对象和文件系统。

下面是一个修改过的 onSuccess 函数，它演示了如何从相机中提取图像并将其上传到服务器。永远不需要 FormData。

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
                );
            }
    }
}

需要指出的重要一点是，我们不使用从相机发送到 onSuccess 函数的原始 URL。我们从 window.resolveLocalFileSystemURL 函数返回的 FileEntry 对象中提取实际的文件系统 URL。

不幸的是，在我能找到的任何地方都没有记录 FormData 的问题。我在页面底部 https://github.com/apache/cordova-plugin-file-transfer 处的 Cordova FileTransfer 插件的向后兼容性说明中偶然发现了 URL 与本地 URL 的一些接触。

FileEntry.toURL() and DirectoryEntry.toURL() return a filesystem URL of the form cdvfile://localhost/persistent/path/to/file which can be used in place of the absolute file path in both download() and upload() methods.

我在使用 FileReader 打开保存的照片并将其附加到 FormData 时也遇到了问题。我相信新 Cordova 中的 FormData API 存在问题。我也知道 API 过去版本中的不一致之处。我的建议是避免使用 FormData 并使用上面概述的技术从 Cordova 的相机或文件系统中获取图像。

Cordova 5.1.1 中的 FormData 相机操作不起作用

FormData in Cordova 5.1.1 with Camera Operation not working

javascript

android

file

form-data

cordova