在现代 Web 开发中，文件上传通常是一个必不可少的功能。在这篇文章中，我们将介绍如何使用 Redux 和 React Native 实现异步文件上传。我们将涵盖使用 react-native-image-picker 获取文件，并使用 redux-thunk 将数据上传到服务器的整个过程。
准备工作
在开始之前，请确保您已熟悉 Redux 和 React Native。如果您还不熟悉这些技术，请查看以下文档：
此外，我们还将使用 react-native-image-picker 作为获取文件的工具。要安装它，请运行以下命令：
npm install react-native-image-picker --save
获取文件并将其添加到 Redux Store
首先，我们需要使用 react-native-image-picker 获取文件。在做这个之前，我们需要在 iOS 和 Android 平台上添加权限。请按照以下步骤操作：
iOS
在 iOS 上，打开 yourProjectName / Info.plist 文件，添加以下代码：
<key>NSPhotoLibraryUsageDescription</key> <string>需要访问照片库以选择图片</string> <key>NSCameraUsageDescription</key> <string>需要访问相机以拍摄照片</string> <key>NSMicrophoneUsageDescription</key> <string>需要访问麦克风以录制视频</string>
Android
在 Android 上，打开 yourProjectName / android / app / src / main / AndroidManifest.xml 文件，添加以下权限：
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-feature android:name="android.hardware.camera"/>
现在您已准备好通过执行以下代码获取文件：
-- -------------------- ---- -------
------ ----------- ---- ----------------------------
----- ------- - -
------ -------
--------------- -
----------- -----
----- ---------
--
--
--------------------------------------- -------- -- -
-- -------------------- -
----------------- --------- ----- ---------
- ---- -- ---------------- -
------------------------ ------ -- ----------------
- ---- -
-- -------------------- ----- ------
-
---一旦我们获取到文件，我们需要将其添加到 Redux store。我们将创建一个带有三个属性的对象：文件名、文件类型和文件数据。文件数据是文件的 base64 编码。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ ----- ------- - ---------- --------- --------- -- --
----- ---------
-------- -
---------
---------
---------
--
---使用 redux-thunk 将数据上传到服务器
现在我们已经将文件添加到 Redux store 中，我们需要将其上传到服务器。为此，我们将使用 redux-thunk。 redux-thunk 允许我们编写具有 side-effect 的 Redux action。要使用 redux-thunk，请运行以下命令：
npm install redux-thunk --save
现在我们将创建一个使用 axios 库从服务器上传文件的 uploadFile 动作。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---------- - ---- -- -------- -- -
-----
-------------------------------------- -
--------- --------------
--------- --------------
--------- --------------
--
-------------- -- -
----------------------
--
------------ -- -
-------------------
---
--现在，我们已经可以上传文件了。让我们把所有的部分放在一起，让它们一起协作。
-- -------------------- ---- -------
------ ----------- ---- ----------------------------
------ - ------- - ---- ------------
------ - ---------- - ---- ------------
------ - ----------- - ---- --------------
----- ------- - -
------ -------
--------------- -
----------- -----
----- ---------
--
--
----- -------- - -- -- -
--------------------------------------- -------- -- -
-- -------------------- -
----------------- --------- ----- ---------
- ---- -- ---------------- -
------------------------ ------ -- ----------------
- ---- -
----- - --------- ----- ---- - - ---------
----- -------- - -------------------
----- -------- - ------------------------------
-------------------------- --------- -----------
--------------------- --------- --------- -------- ----
-
---
-
------ ------- ---------我们在上面的代码中添加了一个名为 pickFile 的函数，它获取文件并上传文件。文件上传代码中，我们首先添加文件到 Redux Store，并且然后使用 uploadFile 动作上传文件。
现在我们已经完成了整个过程，我们可以使用以下代码在我们的 React Native 应用程序中调用文件选择器：
import pickFile from './pickFile';
const App = () => (
<View style={styles.container}>
<Button title="选择文件" onPress={pickFile} />
</View>
);总结
在本教程中，我们介绍了如何使用 Redux 和 ReactNative 实现异步文件上传。我们还涵盖了使用 react-native-image-picker 获取文件，并使用 redux-thunk 将数据上传到服务器的整个过程。我们希望这个教程能够帮助您扩展自己的 React Native 应用程序并向用户提供更好的体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6469c47e968c7c53b0997d06