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

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

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

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

• react-native-image-to-base64
• react-native-upload-from-camera-roll
• this post
• JS.coach
• react-native-fs

然后，一旦您的图像采用 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 的网络选项卡中看不到它，这里有一个答案。

这是因为您使用 sn-p 使此 Networking 选项卡在调试器中工作。

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;

它对我有用。