React Native中如何将移动端本地存储的视频转换为base64格式

解决方案 #

你代码中配置的includeBase64: true仅对图片资源生效，视频资源需要手动通过文件读取接口转换为base64格式，直接在获取到文件路径后调用RNFetchBlob.fs.readFile方法即可实现需求，完整改造后的代码如下：

ImagePicker.launchImageLibrary(
  { mediaType: 'video' },
  async (response) => {
    // 过滤用户取消选择、请求报错的场景
    if (response.didCancel || response.errorCode) return
    try {
      const videoUri = response.assets[0].uri
      // 如果不需要获取文件大小、创建时间等属性，可以跳过stat步骤直接读uri
      const fileStat = await RNFetchBlob.fs.stat(videoUri)
      // 第二个参数指定编码格式为base64
      const videoBase64 = await RNFetchBlob.fs.readFile(fileStat.path, 'base64')
      // 此处即可获取到视频的base64内容用于后续逻辑
      console.log('视频base64长度：', videoBase64.length)
    } catch (err) {
      console.log('视频转base64失败：', err)
    }
  }
);

注意事项 #

• 视频文件通常体积较大，转换为base64会额外占用约33%的内存，如果是超过100M的大视频不建议直接转换为base64，容易导致应用闪退
• iOS端返回的ph://前缀的相册资源路径，RNFetchBlob可以直接识别读取，不需要额外做格式转换
• 如果不需要获取文件其他属性，可直接简化为const videoBase64 = await RNFetchBlob.fs.readFile(response.assets[0].uri, 'base64')，跳过stat步骤也能正常读取

内容的提问来源于stack exchange，提问作者Faizan Ahmad