发布 multipart/form-data 时 React Native fetch 抛出错误

Question

这就是我尝试将图像 POST 作为 multipart/form-data 发送到服务器的方式。

var photo = { uri: this.state.avatarSource,
              type: 'multipart/form-data', 
              name: 'photo.jpg', }; 
let formdata = new FormData(); 
formdata.append('attachment',photo); 
fetch(url,
        { method: "POST", 
          headers: { 'Content-Type': 'multipart/form-data' }, 
          body: formdata 
        }).then((response) => response.json()) 
       .catch((error) => { alert("ERROR " + error) }) 
       .then((responseData) => { alert("Succes "+ responseData) }).done();

But it shows an error : Expected dynamic type string but had type object

Answer 1

如docsformData.append(name, value, filename);

所述

其中的 value 字段接受 USVString or Blob，因为您将 object 传递给它，因此它会抛出错误。

您需要将 image 转换为 blob，附加并上传。

如果你有图像的 base64，那么你可以直接使用 fetch api

将其转换为 blob

fetch(base64URL)
.then(res => res.blob())
.then(blob => console.log(blob))

否则你可以查看 RN-fetch-blob，他们的 multipart/ formData 示例。

Answer 2

2 天后，尝试了很多东西，我对代码进行了一些修改。

RNFetchBlob.fetch('POST', url, {
  'Content-Type': 'multipart/form-data',
}, [ 
    { name: 'file', filename: 'photo.jpg', type: 'image/png', data: RNFetchBlob.wrap(src) }
  ]) .then((resp) => {
    console.log(resp.text());
  }).catch((err) => {
    console.log(err);
  });

Answer 3

@unknown123给出的方案我稍微修改了一下。它对我有用。这是解决方案。

首先，安装 npm 包 rn-fetch-blob

import RNFetchBlob from 'rn-fetch-blob';

RNFetchBlob.fetch('PUT', url, {'Content-Type': 'multipart/form-data'}, Platform.OS === 'ios' ? RNFetchBlob.wrap(filePath) : `RNFetchBlob-${filePath}`)

请注意，就我而言，IOS 和 Android 设备的文件路径不同。我们使用 rn-fetch-blob

以不同的方式处理它

的示例文件路径变量数据

IOS 设备 -

"/Users/Niveditha/Library/Developer/CoreSimulator/Devices/B41EB910-F22B-4236-8286-E6BA3EA75C70/data/Containers/Data/Application/B88777C6-6B10-4095-AB67-BB11E045C1DE/tmp/react-native-image-crop-picker/img.jpg"=12=]

Android 设备 -

"file:///storage/emulated/0/Android/data/com.uploadcameraroll/files/Pictures/img.jpg"

发布 multipart/form-data 时 React Native fetch 抛出错误

React Native fetch throws error when posting multipart/form-data

react-native

react-native-android

react-native-ios