在react-native中使用Blob下载文件

Question

自从 React-native

v0.54

和 Expo

SDK v26

以来，现在支持 Blob。

我正在尝试将 URL 上提供的文件下载到我的手机（如果可能，在 Android 上的我的

Downloads

目录中）

我现在能找到的就是使用

react-native-fetch-blob

的现有解决方案，这似乎不再需要了。

如果有人可以提供一个简短的示例，说明如何开始在

Expo Snack

上实现此功能

Answer 1

世博会

文件系统

您可以使用

FileSystem

模块下载内容并将其保存在设备上的目录下。

安装

• 管理工作流程

$ expo install expo-file-system

• 裸工作流程

在简单的工作流程中，请按照此处的说明进行操作。

使用方法

1. 导入模块

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

2. 创建可继续下载。

使用异步/等待

await FileSystem.downloadAsync(URI, FILE_URI, OPTIONS);

使用承诺

FileSystem.downloadAsync(
  'http://techslides.com/demos/sample-videos/small.mp4',
  FileSystem.documentDirectory + 'small.mp4'
)
  .then(({ uri }) => {
    console.log('Finished downloading to ', uri);
  })
  .catch(error => {
    console.error(error);
  });

注意

请记住，为了保存/存储下载的内容，您需要传递一个valid目录路径/uri。即

FileSystem.documentDirectory + 'small.mp4'

。为了保证目录的路径存在，您可以使用 FileSystem 模块本身来创建目录。像这样：

await FileSystem.makeDirectoryAsync(path, { intermediates: true });

。 options 对象采用 intermediates 属性，确保如果您尝试创建多级目录，它还会为您创建父文件夹（如果不存在）。

Answer 2

XMLHttp请求

这对我有用。使用 XMLHttpRequest 获取文件并以 blob 形式获取响应。

function downloadFile(url) {
  return new Promise((resolve, reject) => {
      var xhr = new XMLHttpRequest();
      xhr.onerror = reject;
      xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
              resolve(xhr.response);
          }
      };
      xhr.open('GET', url);
      xhr.responseType = 'blob'; // convert type
      xhr.send();
  })
}

您现在可以使用

下载文件

downloadFile(YOUR_FILE_URL)
    .then((resolve, reject)=>{console.log((resolve)})

参考