无法从 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 多部分/表单数据。感谢您对此的任何帮助，谢谢！

Answer 1

首先 data 属性不是必需的，您可以使用路径上传文件。如果你真的想要数据，那么有一个道具名称“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 支持。试试这个

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' }}
    })

参考链接

upload video using React-native-fetch-blob

react-native blob support announcement

send Form data using Axios