如何使用 ReactNative 在服务器上上传图像

Question

我正在设置 headers 和 body ，使用 fetch 和 Post 在服务器上上传图像。我得到响应代码 200 但它没有上传图像，但其余数据正在上传。

这是正文的代码：

 export default function setRequestBody(imagePath){

    let boundry = "----WebKitFormBoundaryIOASRrUAgzuadr8l";

    let body = new FormData();

    body.append("--"+boundry+"\r\n");
    body.append("Content-Disposition: form-data; name=imageCaption\r\n\r\n");
    body.append("Caption"+"\r\n");
    body.append("--"+boundry+"\r\n");
    body.append("Content-Disposition: form-data; name=imageFormKey; filename =iimageName.pngg \r\n");
    body.append("Content-Type: image/png \r\n\r\n");
    body.append({uri : imagePath});
    // appened image Data Here
    body.append("\r\n");
    body.append("--"+boundry+"--\r\n");
    return body

}

请帮忙。我犯了什么错误。 :(

原文由 Rajeev Upadhyay 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我找到了解决方案：

 let body = new FormData();
body.append('photo', {uri: imagePath,name: 'photo.png',filename :'imageName.png',type: 'image/png'});
    body.append('Content-Type', 'image/png');

fetch(Url,{ method: 'POST',headers:{
     "Content-Type": "multipart/form-data",
     "otherHeader": "foo",
     } , body :body} )
  .then((res) => checkStatus(res))
  .then((res) => res.json())
  .then((res) => { console.log("response" +JSON.stringify(res)); })
  .catch((e) => console.log(e))
  .done()

\*\* 文件名是可选的…

原文由 Rajeev Upadhyay 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

问题是 body.append({uri : imagePath}); 因为 react native JSC 不支持 File 和 Blob，所以你必须使用库。

react-native-fetch-blob 对此有很好的支持，例如它的 README.md

     RNFetchBlob.fetch('POST', 'http://www.example.com/upload-form', {
        Authorization : "Bearer access-token",
        otherHeader : "foo",
        'Content-Type' : 'multipart/form-data',
    }, [
    // element with property `filename` will be transformed into `file` in form data
    { name : 'avatar', filename : 'avatar.png', data: binaryDataInBase64},
    // custom content type
    { name : 'avatar-png', filename : 'avatar-png.png', type:'image/png', data: binaryDataInBase64},
    // part file from storage
    { name : 'avatar-foo', filename : 'avatar-foo.png', type:'image/foo', data: RNFetchBlob.wrap(path_to_a_file)},
    // elements without property `filename` will be sent as plain text
    { name : 'name', data : 'user'},
    { name : 'info', data : JSON.stringify({
      mail : '[e-mail]',
      tel : '12345678'
    })},
  ]).then((resp) => {
    // ...
  }).catch((err) => {
    // ...
  })

原文由 Ven Jest 发布，翻译遵循 CC BY-SA 3.0 许可协议