Question

我一直在查看我能找到的所有问题，但看起来没有人遇到我的问题。

我正在运行react-native 39并且我想上传图片。看起来可以使用FormData上传它。

/**
 * Polyfill for XMLHttpRequest2 FormData API, allowing multipart POST requests
 * with mixed data (string, native files) to be submitted via XMLHttpRequest.
 *
 * Example:
 *
 *   var photo = {
 *     uri: uriFromCameraRoll,
 *     type: 'image/jpeg',
 *     name: 'photo.jpg',
 *   };
 *
 *   var body = new FormData();
 *   body.append('authToken', 'secret');
 *   body.append('photo', photo);
 *   body.append('title', 'A beautiful photo!');
 *
 *   xhr.open('POST', serverURL);
 *   xhr.send(body);
 */

使用方法我只需在请求正文中获取[object Object]。使用fetch而不是xhr我得到了一些数据，但现在我希望，没有我可以从服务器获取的图像

Answer 1

问题是表单不知道您尝试编码的对象中存储的信息意味着什么，因此它不会从设备中获取图片数据，而只是弄清楚＆＃39 ;适当＆＃39; photo对象可能具有的表示形式，通常是字符串。在这种情况下[object Object]。当然，这不会被您的服务器接受。事实上，这适用于所有非原始类型的JavaScript。您应该先使用JSON.stringify(photo)将其转换为JSON字符串。

相反，您可以尝试以FormData可以理解的格式从相机胶卷中检索图像数据，例如，在base64中对您的图像进行编码的字符串。这不是React Native附带的功能，但快速搜索检索了一些有前途的包。也许看看：

然后，一旦您的图像采用base64格式，您就可以执行以下操作：

var photo = {
  data: myBase64Data,
  type: 'image/jpeg',
  name: 'photo.jpg',
};

var body = new FormData();
body.append('authToken', 'secret');
body.append('photo', JSON.stringify(photo));
body.append('title', 'A beautiful photo!');

xhr.open('POST', serverURL);
xhr.send(body);

希望有所帮助。

Answer 2

如果你们仍在寻找答案，为什么您无法在React Native的“网络”选项卡中看到该答案，则为答案。

这是因为您使用代码段使此“网络”选项卡在调试器中起作用。

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;

还添加以下行，它将启用FormData的正常行为。

GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData

您应该以以下内容结束：

GLOBAL.XMLHttpRequest = GLOBAL.originalXMLHttpRequest || GLOBAL.XMLHttpRequest;
GLOBAL.FormData = GLOBAL.originalFormData || GLOBAL.FormData;

对我有用。

react-native FormData上传不会发送正确的数据

2 个答案: