无法从 react-native-customized-image-picker 获取数据响应对象

Question

我在这里的文档中读到：https://github.com/mg365/react-native-customized-image-picker 我可以从图像中获取数据的响应对象，但是当我尝试它时我得到了 undefined。我可以获得其他对象，例如大小、mime 和路径，如下所示：

    SelectPhoto = () =>{
     ImagePicker.openPicker({
     cropping: true,
     title: 'Select a Picture',
     isCamera: true,
    }).then((imgResponse) => {
      console.log(imgResponse[0].path); <-- This logs the correct path
      console.log(imgResponse[0].data); <-- This logs the undefined
      let imgSource = { uri: imgResponse[0].path };
      this.setState({
        userimgSource: imgSource,
      });
    });
   }

我的最终目标是将图像上传到服务器，我认为需要数据？我正在使用 RNFetchBlob multipart/form-data。感谢您对此提供任何帮助，谢谢！

Answer 1

首先，根本不需要数据道具，您可以使用路径上传文件。如果你真的想要数据，那么有一个道具名称 "includeBase64"（默认情况下它是 false）将它设置为 true。

   SelectPhoto = () =>{
     ImagePicker.openPicker({
     cropping: true,
     title: 'Select a Picture',
     isCamera: true,
     includeBase64:true
    
    })

注意：设置 {includeBase64: true} 会将您的图片转换为 base64，当您尝试上传大图片时，这可能会导致 android 内存不足问题。

上传您的使用路径和 React-Native-Fetch-Blob

    RNFetchBlob.fetch('POST', URL, {
        // dropbox upload headers
        ...
        'Content-Type': 'multipart/form-data',
        // Change BASE64 encoded data to a file path with prefix `RNFetchBlob-file://`.
        // Or simply wrap the file path with RNFetchBlob.wrap().
    }, [
            // element with property `filename` will be transformed into `file` in form data

            { name: 'file', filename: 'Image.png', data: RNFetchBlob.wrap(response.uri) },
            // custom content type

        ]).then((res) => {

        })
        .catch((err) => {
            // error handling ..
        })

如果你有 RN>=0.54 那么你不需要 fetch-blob 来上传图片 React-native 现在有完整的 blob support.try this

var photo = {
      uri: URI,
      type:image/png, // check your object you will get  mime-type in image picker response.
      name: file,
      fileName:Image.png
    };
    var body = new FormData();
    body.append('file', photo);
    axios({
        method: 'post',
        url: 'URL',
        data: body,
        config: { headers: {'Content-Type': 'multipart/form-data' }}
    })

参考链接

react-native blob support announcement

无法从 react-native-customized-image-picker 获取数据响应对象

Can't get the data response object from react-native-customized-image-picker

object

image-uploading

reactjs

react-native

react-native-fetch-blob