如果在 iOS 和 Android 上的 Web 应用程序中使用 FormData 发送文件，则转换为 [Object object] 字符串

Posted 2023-03-12

【中文标题】如果在 iOS 和 Android 上的 Web 应用程序中使用 FormData 发送文件，则转换为 [Object object] 字符串

【英文标题】：File converted to [Object object] string if sent using FormData in web app on iOS & Android

【发布时间】：2013-05-24 09:47:12

【问题描述】：

我正在构建一个基于 Cordova/PhoneGap 的 Web 应用程序，它使用 multipart/form-data POST 请求将文件上传到服务器。

以下代码适用于 BlackBerry 10：

var postRequest = new XMLHttpRequest();
if (postRequest.overrideMimeType) 
    postRequest.overrideMimeType('text/xml');

var fd = new FormData();
fd.append('param1', 'value1');
[...]
fd.append('file', file, fileName);
postRequest.open('POST', url, true);
postRequest.send(fd);

但是，在运行 ios6 的 iPhone 上，File 对象在发送到服务器时会被 String [Object object] 替换，类似于Safari converts File to [object Object] when inserted into FormData. How to fix? 中描述的问题。

与该问题相反，我没有克隆 File 对象。我的应用程序通过“打开方式...”菜单使用来自其他应用程序的文档进行调用。我传递了一个本地文件系统 URI，我使用 window.resolveLocalFileSystemURI() 解析它。这完美地工作，我首先收到一个 FileEntry 和一个 File 对象。然而，这个对象似乎没有被正确识别，而是在将请求传输到服务器时调用了它的 toString() 方法。

这是 iOS 上的错误吗？或者在创建 File 对象时可能是 PhoneGap 中的错误？最好的解决方法是什么？

更新：我刚刚在 android 上遇到了同样的问题，所以这个问题似乎不是 iOS 特有的。

【参考方案1】：

iOS 的一种可能的解决方法似乎是使用 FileReader 读取文件，从中构造一个新的 Blob 对象，然后将其传输到服务器：

var reader = new FileReader();
reader.onloadend = function(evt) 
     var fileBlob = new Blob([evt.target.result],  'type' : fileType );
;
reader.readAsArrayBuffer(file);

此处使用的 Blob 构造函数需要 iOS 6.0 或更高版本。这样数据就完全按预期传输到服务器了。

也可以在 Android 上使用 WebKitBlobBuilder 创建 Blob。不幸的是，在我的测试期间，这并没有解决 Android 上的问题。

【讨论】：

这里有同样的问题。所以看来还是用Phonegap的FileTransfer比较好。这也回答了我的问题：***.com/questions/17480725/…

是的，尤其是在 Android 上，这似乎是目前唯一可行的解​​决方案。