当前位置: 首页 > 知识库问答 >
问题:

如何使用 react native 和 react-native-fetch-blob 在 iOS 上下载和检索本地文件?

韦知
2023-03-14

我正在使用 react-native-fetch-blob 下载 mp3 文件,然后稍后播放它们。问题是当我关闭应用程序并再次重新启动时,RNFetchBlob.fs.dirs.DocumentDir 的实际路径会发生变化,这意味着我无法使用下载文件后立即存储的绝对文件路径在下次运行应用程序时检索文件。

下面是我下载和存储文件路径的代码:

export function downloadAudio(urlArray) { //download every section in the urlArray
  return (dispatch) => {
    Promise.all(urlArray.map(section => {
      dispatch(startDownload(section.section_id))
      console.log('download start for id = ',section.section_id ) //start download
      return RNFetchBlob
      .config({
        path: RNFetchBlob.fs.dirs.DocumentDir + '/courseSections/' + section.section_id + '.mp3',
        appendExt: 'mp3'
      })
      .fetch('GET', section.section_url, {
        'Cache-Control': 'no-store'
      })
      .progress({ count: 10 }, (received, total) => {
        console.log(`progress for section ${section.section_id}: `, Math.floor(received/total*100), '%')
        dispatch(downloadProgress({id: section.section_id, progress: Math.floor(received/total*100)/100}))
      })
      .then(res => {
        console.log(`section ${section.section_id} is saved to: `, res.path())
        return { path: res.path(), id: section.section_id }
      })
      .then(pathInfo => dispatch(downloadSuccess(pathInfo))) //download finished
    }))
      .catch((error, statusCode) => {
        console.log(statusCode, ' error: ', error)
      })
  }
}

我将{path:res.path(), id:section.section_id}存储为持久化应用程序状态的一部分。但是它没有用,因为下次我打开应用程序时,文件路径已被重新分配。例如,这是一个文件下载到的路径:下载的文件路径

但是在我关闭应用程序并重新启动后,路径更改为:/用户/NatashaChe/库/开发人员/CoreSimulator/设备/830778DE-3CE3-4FC7-AA4B-DFBAE999751C/data/容器/Data/Application/0C47E33F-ACF8-4539-9456-8FF3E8FBECB2/文档/课程部分/14.mp3

即文件被分配到< code>Application文件夹下的不同子文件夹。

显然,音频播放器(我使用的是react-native-sound)无法使用应用程序存储的原始路径找到文件。所以我的问题是:有没有一种方法可以修复路径?或者有其他我不知道的检索文件的方法吗?

此外,我还在电脑上使用iOS模拟器。还没有在电话里试过这个。有人知道以上代码是否可以直接在iphone上使用,并将文件保存到我的应用程序目录中吗?或者我应该以任何其他方式设置文件路径?

我使用的是反应原生 0.41。

共有1个答案

赫连俊雄
2023-03-14

我进行了以下更改以使其正常工作,至少目前在模拟器上是这样。不确定实际手机上会发生什么。

在检索文件时,不再像上面的代码那样使用res.path()返回的文件路径,而是在检索文件时直接使用filePath=RNFetchBlob.fs.dirs.DocumentDir'/CourseSections/'sectionInfo.section.section_id'. mp3'

 类似资料:
  • 我是react-本地新手。我想使用rn-get ch-blob上传一个带有另一个参数“注释”的文件。我能够选择一个文件并使用react-native-docent-picker包获取文件的路径、名称、类型和大小。文件详细信息的日志是: 我简单地使用了方法' POST '的fetch函数,不确定这一点。 变量文件的日志: 方法: 我尝试使用 RNFetchBlob 方法,但不知道如何传递其他参数:

  • New Maintainers and Repository Location This repository no longer is the main location of "react-native-fetch-blob". The owners of this fork have agreed to maintain this package: https://github.com/jo

  • null 下面是我使用的代码: 在将cn1-filechooser库导入项目并刷新库后,我将按钮添加到表单中。filechooser可以工作--我在模拟器、Android设备和iPhone上都试过了。 我的问题是:

  • 问题内容: 我在这里遇到的一个问题可能是一个我忽略的非常简单的答案……如何使用NSURL检索本地文件?我在这里: 但是,在成功构建之后,它将挂在var urlpath上。我到处搜寻,并在这里和其他地方尝试了一些建议,但无济于事。请帮忙?:( 问题答案: 您正在尝试从文件系统而不是从Web加载文件。 对于创建,您需要使用fileURLWithPath:类方法。 更改您的方法,例如: 迅捷2 迅捷3

  • 问题内容: 如何存储本地文件(如JSON),然后从控制器中获取数据? 问题答案: 从React Native 0.4.3开始,您可以像这样读取本地JSON文件: 然后像普通的JS对象一样访问customData。

  • Chrome的Blob存储系统设计文档提到了以下内容。 如果blob的内存空间已满,或者新的blob太大而无法在内存中,那么blob系统将使用磁盘。这可以是将旧的blob分页到磁盘,或者直接将新的太大的blob保存到磁盘。 然而,即使在多次浏览文档之后,我仍然有以下担忧: null https://github.com/eligrey/filesaver.js/#supported-browser