带有相机操作的 Cordova 5.1.1 中的 FormData 不起作用答案

【问题标题】：FormData in Cordova 5.1.1 with Camera Operation not working带有相机操作的 Cordova 5.1.1 中的 FormData 不起作用
【发布时间】：2015-10-04 17:05:13
【问题描述】：

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

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

cordova 插件设备科尔多瓦插件应用浏览器科尔多瓦插件相机科尔多瓦插件文件科尔多瓦插件文件传输科尔多瓦插件白名单

Cordova 4.3.1 和 CordovaLib android 3.7.2 也会出现同样的问题。

这是我用来激活设备摄像头的 sn-p 代码。

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。任何见解将不胜感激！

谢谢，亚伦

【问题讨论】：

标签： javascript android file cordova form-data

【解决方案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
                );
            }
    }
}

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

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

FileEntry.toURL() 和 DirectoryEntry.toURL() 返回格式为 cdvfile://localhost/persistent/path/to/file 的文件系统 URL，可用于代替两个 download() 中的绝对文件路径和 upload() 方法。

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

【讨论】：