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

问题在于 Form 不知道存储在您尝试编码的对象中的信息是什么意思，因此它不会从设备中获取图片数据，而只是找出“正确的” 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);

希望对您有所帮助。