如何使用 RNFetchBlob 或任何其他方式在本机反应中发布多部分答案

【问题标题】：How to post multipart in react native with RNFetchBlob or any other way如何使用 RNFetchBlob 或任何其他方式在本机反应中发布多部分
【发布时间】：2019-09-27 06:55:27
【问题描述】：

我正在尝试以本机反应发送多部分请求。我尝试了很多方法，但都没有奏效。请检查此示例。

const data ={
        "person": this.state.person,
        "email": this.state.email,
        "password":this.state.password,
        "confirmPassword":this.state.confirmPassword,
        "otp": {
            "secret":this.state.otp
        },
    }



  RNFetchBlob.fetch('POST', '${server}api/user-registration/register', {
        'Content-Type' : 'multipart/form-data',
    }, [
        {
            name:"data",data:JSON.stringify(data)
        }
    ]).then((resp) => {
       console.log(resp)
    }).catch((err) => {
       console.log(err)
    })

我收到 415 作为响应。看起来它没有将 multipart/form-data 放在 Headers 中。

我已经用 Reactjs 试过了，它完全可以工作。这是 Reactjs 中的一个示例。

  const eventData = new FormData();
eventData.append('data', new Blob([JSON.stringify(data)], { type: "application/json" }));

axios.post('${server}api/user-registration/register',eventData,{headers:{}})

任何人都可以看到 RNFetchBlob 代码的任何问题吗？

【问题讨论】：

标签： react-native blob fetch multipart

【解决方案1】：

像这样用于普通文本

const body = new FormData();
body.append('data', JSON.stringify(data));

对文件使用这样的代码

const body = new FormData();
body.append('img', { name: 'img.jpg', type: 'image/jpg', uri: 'url for image or video' });

然后通常用这个或你自己的方法调用API

fetch('url', {
   method: 'post',
   body
}).then(a=>a.json()).then(() => {
   *code what you want*
});

【讨论】：

【解决方案2】：

您可以使用名为 axios 的库。

let formData = new FormData();
formData.set("field1", field1_value);

并使用axios 发出发布请求：

axios({
    method: "POST",
    url: "<put-your-url-here>",
    data: formData,
    config: {
        headers: {
            'Content-Type': "multipart/form-data"
        }
    }
}).then(response=>handler).catch(error=>errorHandler);

这里，handler 是一个将响应作为输入并处理它的函数，errorHandler 是一个接收错误并处理它的函数。

【讨论】：

【解决方案3】：

RNFetchBlob.fetch('POST', 'your serviceUrl', {
        Authorization: "Bearer "+token,        
        'Content-Type': 'multipart/form-data',
      }, [
        { name: 'file', filename: 'image.png', type: 'image/png', data: JSON.stringify(RNFetchBlob.wrap(Imageuri))}])then((resp) => {
          //response body         
        }).catch((err) => {
          console.log('error---------', err)
          // ...
        })

【讨论】：

虽然此代码可以解决问题，including an explanation 说明如何以及为什么解决问题将真正有助于提高您的帖子质量，并可能导致更多的赞成票。请记住，您正在为将来的读者回答问题，而不仅仅是现在提问的人。请编辑您的答案以添加解释并说明适用的限制和假设。