3

我一直在尝试使用 React Native 和 Expo 在移动设备上保存图像，我尝试过使用这些包：

import RNFetchBlob from 'react-native-fetch-blob';
import RNfs from 'react-native-fs ';

但是在实施它们时都给了我这个错误

null is not an object (evaluating 'RNFetchBlob.DocumentDir')

然后尝试 expo-file-system 但我没有看到任何关于如何转换 base64 并将其下载到移动设备的明确示例

更新

我能够做到，我的目的是保存 QR 的 base64 并将其转换为 png，同时能够共享它，我使用expo-file-system和expo-sharing

这是mi代码，

import * as FileSystem from 'expo-file-system';
import * as Sharing from 'expo-sharing';

//any image, I use it to initialize it

const image_source = 'https://images.unsplash.com/photo-1508138221679-760a23a2285b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80';

share=()=>{
  var self = this;
  self.setState({loading:true})
        FileSystem.downloadAsync(
        image_source,
        FileSystem.documentDirectory  + '.png'
      )
        .then(({ uri }) => {
          console.log(self.state.base64Code);
          FileSystem.writeAsStringAsync(
              uri,
              self.state.base64Code,
              {'encoding':FileSystem.EncodingType.Base64}
          )
          .then(( ) => {
            this.setState({loading:false})
            Sharing.shareAsync(uri);
          })

        })
        .catch(error => {
          console.error(error);
        });
}

其实不知道是不是最好的办法，先在目录下写个png图片，然后用base64代码重写，但是好用

4

2 回答 2

3

这对我有用：

const data = "data:image/png;base64,ASDFASDFASDf........"
const base64Code = data.split("data:image/png;base64,")[1];

const filename = FileSystem.documentDirectory + "some_unique_file_name.png";
await FileSystem.writeAsStringAsync(filename, base64Code, {
  encoding: FileSystem.EncodingType.Base64,
});

const mediaResult = await MediaLibrary.saveToLibraryAsync(filename);
于 2020-08-07T19:22:58.570 回答
1

感谢更新。我在 Android 和 base64 图像上为此苦苦挣扎了好几天！

在我的情况下，我试图从世博会的签名板上传 base64 图像并且总是得到“网络请求失败”

我设法让它像这样工作希望它有所帮助！

  import * as FileSystem from 'expo-file-system';
  
  const uploadBase64 = async (base64String) => {

    this.setState({ uploading: true });

    //Without this the FilySystem crashes with 'bad base-64'
    const base64Data = base64String.replace("data:image/png;base64,","");

    try {
      //This creates a temp uri file so there's no neeed to download an image_source to get a URI Path
      const uri = FileSystem.cacheDirectory + 'signature-image-temp.png'
      await FileSystem.writeAsStringAsync(
          uri,
          base64Data,
          {
            'encoding': FileSystem.EncodingType.Base64
          }
      )

      //At this point the URI 'file://...' has our base64 image data and now i can upload it with no "Network request failed" or share the URI as you wish
      const uploadResult = await this.uploadImageAsync(uri).then(res => res.json())
      if (uploadResult) {
        this.setState({ image: uploadResult.location });
      }
      this.setState({ uploading: false });

    } catch (e) {
      this.setState({ uploading: false });
      console.log('*Error*')
      console.log(e)
    }
  }

  //Just and ordinary upload fetch function 
  const uploadImageAsync = (uri) => {

    let apiUrl = 'https://file-upload-example-backend-dkhqoilqqn.now.sh/upload';

    let formData = new FormData();
    formData.append('photo', {
      uri,
      name: `photo.png`,
      type: `image/png`,
    });

    let options = {
      method: 'POST',
      body: formData,
      headers: {
        Accept: 'application/json',
        'Content-Type': 'multipart/form-data',
      },
    };

    return fetch(apiUrl, options);
  }
于 2020-07-31T05:56:40.717 回答