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

首先完全不需要数据道具，您可以使用path上传文件。如果您确实需要数据，则有一个道具名称“ 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

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

1 个答案: