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

Question

我正在尝试在原生react中发送多部分请求。我试过很多方法，但都不管用。请检查此示例。

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放在头文件中。

我已经用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代码上看到任何问题吗？

Answer 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*
});

Answer 2

您可以使用一个名为axios的库。

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

并使用axios发出Post请求

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是将错误作为输入并对其进行处理的函数。

Answer 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)
          // ...
        })