介绍
react-native-files-uploaders 是一个用于在 React Native 中上传文件的 npm 包。它可以方便地向服务器上传文件，支持多个文件上传和跨域请求。这个教程会讲解如何使用 react-native-files-uploaders，其中会包含详细的使用方法和示例代码。
安装
在使用 react-native-files-uploaders 之前，你需要确保已经安装了 React Native。然后可以通过 npm 安装 react-native-files-uploaders。
npm install react-native-files-uploaders
使用
react-native-files-uploaders 有多个上传文件的 API，其中最常用的是 uploadFile 和 uploadFiles。这里以 uploadFile 为例。
-- -------------------- ---- ------- ------ -------------- ---- ------------------------------- --------------------------- ---- ----------------------- -- ------- ------- ------- -------- - --------- ------------------- -- ------- - ------- ------- -- ----------------- -- ----- ---------------------- -- ---- --------- ------------- -- -------- ---------------- -- - ------------------- --------- ---------- -------------- -- - ------------------- ------- ------- ---展开代码
上面代码使用了 uploadFile API 向服务器上传一个文件。uri 参数是本地文件的路径，如果是摄像头或相册中的文件可以使用 react-native-image-picker 获取路径。method 参数是请求方法，一般为 POST 或 PUT。headers 参数设置请求头，如果需要向服务端传递 Token 等可以在这里设置。fields 参数是上传文件的字段名，服务端需对应设置。type 参数是请求类型，一般为 multipart/form-data。fileName 参数是上传文件的文件名。
uploadFiles API 用于上传多个文件，其使用方法与 uploadFile 相似，这里不再赘述。还有一些其他的 API 可以用于上传数据流等，详见官方文档。
深度与学习
使用 react-native-files-uploaders 可以方便地向服务器上传文件，但是在实际使用中，还需要注意以下几点：
上传文件的大小限制：在服务端需要限制上传文件的大小，一般为几十 M 至上百 M。如果要上传超大文件可以考虑使用分片上传。
文件上传进度：在上传大文件时，需要显示上传进度以免用户等待过长。可以使用第三方组件如 react-native-progress 等实现文件上传进度条。
文件上传成功与失败：在上传文件后需要显示上传结果，成功可以显示上传成功，失败需要显示上传失败。此处可以使用 React Native 提供的 Toast 组件等方案。
指导意义
react-native-files-uploaders 虽然简单易用，但是在实际使用中需要注意文件大小限制、上传进度和上传结果等问题，这些问题需要在开发过程中进行充分的考虑和实现。如果能够解决这些问题，react-native-files-uploaders 将会是一个非常便捷的文件上传工具。
示例代码
下面是一个使用 react-native-files-uploaders 和 react-native-progress 的示例代码，用于上传文件并实时显示上传进度。
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ - ----- ----- ------ - ---- --------------- ------ -------------- ---- ------------------------------- ------ ----------- ---- ---------------------------- ----- ------------ - -- -- - ----- ---------- ------------ - ------------ ----- ----------- ------------- - ---------------- ----- ------------ - ----- -- -- - ----- ------- - ----------------------- ----- -------- - ------------- ----- -------- - --- ----------- ----------------------- - ---- -------- ----- --------- ----- ----------- --- ------------------- ----- --- - ----- ---------------------------- ------- ------- -------- - --------------- ---------------------- --------- ------------------- -- ------- - ------- ------- -- ------ - - ----- --------- --------- --------- --------- -------- --------- ------------ -- -- --------- ------------- -- - ----- ------- - -------------------------------- - -------------------- - ----- --------------------- -- ---- ----------------------------- --- -------------------- -- ----------- --- ---- - -------------- - ---- - -------------- - -- ------ - ------ ------- ------------ ---------------------- -- ---------- -- - ------ ------------------- ------------ ------------------ - ---- ------------ -- ------- -- ------- -- -- ------ ------- -------------展开代码
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005686481e8991b448e465d
