[facebook/react-native]上传图片到服务器

仅供参考，在 JS 和 Obj-C 之间来回传输数据相对较慢，因此您可能希望将所有图像数据保留在 Obj-C 中。我没有具体数字，但我希望您会看到传输几 MB 数据需要相当长的时间。与上传照片所需的时间相比，它很小，但保持 JS <=> Obj-C 消息队列清晰是个好主意。

您可以编写一个微型桥接模块来接收资产 URL，然后执行上传，向 JS 报告进度/错误/成功信息。

你可以做

xhr.send(node.image)

它将作为附件发送。我们在广告管理器应用程序中使用它

（我希望它是开源版本）

查看我的react-native-file-transfer。它直接从 Obj-C 发出请求，速度更快。

无论如何，这个功能现在已经内置到 React Native 的 XHR 实现中。您可以通过指定本地文件或资源库 URL 将多个文件附件附加到请求正文。

如果有人感兴趣：XHR 上传示例： https: //github.com/facebook/react-native/blob/master/Examples/UIExplorer/XHRExample.js#L184 感谢您发送！

虽然它已关闭，但我想知道如何在react-native中上传之前压缩图像，因为相机胶卷中的图像太大。

@narychen 目前最好的选择是使用 ImageEditor 模块调整图像大小，然后上传调整后的图像。

看来 ImageEditor 在 Android 上不可用。并且没有指定压缩质量。也许编写一个本机模块是更好的选择？

@narychen，你说得对，ImageEditor 不支持质量参数，但我们可能可以添加一个 - 调整图像大小将使文件小得多，而且你可能不需要 8MP 分辨率。

ImageEditor 由本机模块 (ImageEditingManager) 支持，并且可在 Android 上使用，但由于某种原因，它似乎尚未开源 - @dmmiller，我们可以将其移至 Android OSS 文件夹吗？- 它已经在 iOS 开源中。

对于那些需要 Android 解决方案的人，请看看这是否适合您。

https://github.com/Wraptime/react-native-get-real-path

是否可以使用上传图像fetch()来代替？

这是一个也适用于 Android 的解决方案。复制自https://github.com/marcshilling/react-native-image-picker/issues/31，由 alvaromb 编写。

export function postData (url, params, fileURL) {
  let data = new FormData()
  if (fileURL) {
    data.append('image', {uri: fileURL, name: 'image.jpg', type: 'image/jpg'})
  }
  _.each(params, (value, key) => {
    if (value instanceof Date) {
      data.append(key, value.toISOString())
    } else {
      data.append(key, String(value))
    }
  })
  const config = {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'multipart/form-data; boundary=6ff46e0b6b5148d984f148b6542e5a5d',
      'Content-Language': React.NativeModules.RNI18n.locale,
      'Authorization': 'Token ABCDEF123457890',
    },
    body: data,
  }
  return fetch(API_URL + url, config)
    .then(checkStatusAndGetJSONResponse)
}

有人能告诉我哪里错了吗？使用表单数据将图像上传到服务器。

     uploadData()
   {

     let formdata = new FormData();
     formdata.append("case_date", "2016-12-27")
     formdata.append("case_time","17:32")
     formdata.append("category",1)
     formdata.append("description", "this is car accident")
     formdata.append("image_list", {uri: 'file:///storage/emulated/0/DCIM/IMG_20161227_170739.jpg',        name: 'IMG_20161227_170739.jpg.', type: 'multipart/form-data'})

    fetch('myapi',{
      method: 'post',
      headers: {  
            'Content-Type': 'multipart/form-data', 
            'Authorization':'Bearer '+'sdlDpbzyp1DfqcX7ZJ74FLi8WHha06'

         },
        body: formdata
    }).then((response)=>{if(response.status==200)
                       {
                         console.log('response:',response);
                         response.json().then((responseData) => { 
                         console.log("inside responseData 200:",responseData);
                         console.log('responseData:',responseData);

                        })}
                        else
                        if(response.status==400)
                        { 
                        response.json().then((responseData) => { 
                        console.log("inside responseData 400:",responseData);

                        })
                        }
        else

         {console.log('hi else',response.status)}

     }).done();

   }

如果您仍然遇到此问题，或者刚刚遇到此问题，请尝试为您的内容类型添加边界 'Content-Type': 'multipart/form-data; boundary=someArbitraryUniqueString

如果有人来这里搜索为什么上传到 S3 预签名 URL 不能按预期工作 --> USE xhr! It works。获取有关标头的问题Content-Type。虽然我不太明白细节