使用图像数组创建 FormData 并在 React-Native 中使用 rn-fetch-blob 上传答案

【问题标题】：Create FormData with image array and uploading using rn-fetch-blob in React-Native使用图像数组创建 FormData 并在 React-Native 中使用 rn-fetch-blob 上传
【发布时间】：2019-02-08 14:30:57
【问题描述】：

我正在使用rn-fetch-blob 库将一些图片上传到服务器。但是我遇到了不同类型的错误，例如 Content-Type 上没有边界或 FormData 结构本身的错误，例如“NSMutableDictionary 类型的类型无法转换为 NSString”，我感到非常沮丧。

我得到一个像这样的图像数组：

var images = [
     {name 'pic1', data: RNFetchBlob.wrap(imagePathHere), type: 'image/jpeg'},
     {name 'pic2', data: RNFetchBlob.wrap(imagePathHere), type: 'image/jpeg'},
     {name 'pic3', data: RNFetchBlob.wrap(imagePathHere), type: 'image/jpeg'},
];

然后我按如下方式创建 FormData：

  const formData = new FormData();
  formData.append('id', userId)   // <-- numeric type
  formData.append('pictures', images);

我正在使用'Content-Type': 'multipart/form-data' 发送来自 RNFetchBlob 的发布请求，并将 formData 直接传递给它。

关于什么是错的任何想法？我在某处读到 FormData 只允许字符串或 blob，我应该从我的数组中创建一个 Blob 吗？我该怎么做？

提前致谢。

【问题讨论】：

标签： react-native form-data react-native-fetch-blob

【解决方案1】：

经过一番努力，我在其他一些 github 中找到了关于我必须为参数传递的结构的解决方案。对于我的具体情况，这将是正确的。

   var reqData = [
      { name: 'id', data: response.data.id }
   ];

   this.state.images.forEach((image) => {
      reqData.push({
         data: image.imageFile,
         filename: image.fileName.split('.')[0] + '.jpg',
         name: 'pictures',
         type: image.type
      })
   });

但基本上这就是一个例子：

var params = [
   { 
       name: 'id',
       data: 43
   },
   { 
       name: 'image',
       data: RNFetchBlob.wrap(imagePath),
       filename: 'image1.jpg',
       type: 'image/jpeg'
   },
   { 
       name: 'image',
       data: RNFetchBlob.wrap(imagePath),
       filename: 'image2.jpg',
       type: 'image/jpeg'
   },
];

【讨论】：