Expo图像选择器无法在React Native中从Mobile上传的Web上显示图像答案

【问题标题】：Expo image picker cannot show image on web that uploaded from Mobile in React NativeExpo图像选择器无法在React Native中从Mobile上传的Web上显示图像
【发布时间】：2022-01-04 10:12:13
【问题描述】：

我从网络帐户上传了图片，该图片也显示在移动设备上，但是当我从移动设备上传图片时，它无法在网络或任何其他移动设备上显示

因为在数据库中 web 图像 uri 是可读的，但移动图像 uri 不可读我的图像选择器代码

 const pickImage = async () => {

      // No permissions request is necessary for launching the image library
      let result = await   ImagePicker.launchImageLibraryAsync({
          


        

        mediaTypes: ImagePicker.MediaTypeOptions.All,
       
        base64: true,
        
        
      });

图片来自网络

从手机上传的图片

【问题讨论】：

标签： firebase react-native react-native-image-picker

【解决方案1】：

这对我有用，使用 rn-fetch-blob 将图像 uri 作为 blob 读取。

import launchImageLibrary from 'react-native- 
image-picker'; 
import RNFetchBlob from 'rn-fetch-blob';
import storage from '@react-native-firebase/storage';


const pickImage = () => {

    let options = {
        mediaType: 'photo',
        quality: 0.5,
    };

    launchImageLibrary(options, (response) => {

        console.log('Response = ', response);
        uploadImagePicked(response);

    });

};


const uploadImagePicked = (response) => {

    if (response.fileName) {

        const fileName = response.fileName;
        var storageRef = storage().ref(`receiptImages/${fileName}`);

        RNFetchBlob.fs.readFile(response.uri , 'base64')
        .then(data => {
            storageRef.putString(data, 'base64', {contentType:"image/jpg"})
            .on(
            storage.TaskEvent.STATE_CHANGED,
            snapshot => {
                console.log("snapshot: " + snapshot.state);
                console.log("progress: " + (snapshot.bytesTransferred / snapshot.totalBytes) * 100);

                if (snapshot.state === storage.TaskState.SUCCESS) {
                    console.log("Success");
                }
            },
            error => {
                console.log("image upload error: " + error.toString());
            },
            () => {
                storageRef.getDownloadURL()
                .then((downloadUrl) => {
                    console.log("File available at: " + downloadUrl);
            
                })
            })
        })
        .catch(error => {
            console.log(error);
        })
    }
    else {
        console.log("Skipping image upload");  
    }

}

【讨论】：