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

时间:2019-02-08 14:30:57

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

我正在使用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吗?我该怎么办?

谢谢。

1 个答案:

答案 0 :(得分:0)

经过大量的努力,我在其他一些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'
   },
];