react-native-fetch-blob完整教程：从零开始掌握文件上传下载

react-native-fetch-blob完整教程从零开始掌握文件上传下载【免费下载链接】react-native-fetch-blobA project committed to making file access and data transfer easier, efficient for React Native developers.项目地址: https://gitcode.com/gh_mirrors/re/react-native-fetch-blobreact-native-fetch-blob是一个专为React Native开发者设计的文件访问和数据传输库提供了高效的文件上传、下载和文件系统访问API支持大文件的流读写操作让移动应用中的文件处理变得简单高效。 为什么选择react-native-fetch-blob在React Native开发中处理文件上传下载和文件系统操作常常是一个挑战。react-native-fetch-blob通过以下特性解决了这些问题原生级性能直接从/向存储传输数据无需BASE64桥接大幅提升性能全面的文件API支持常规文件、Asset文件和CameraRoll文件访问文件流支持处理大文件时不会导致内存溢出Web API兼容提供Blob、File、XMLHttpRequest等Web API的polyfill跨平台支持同时支持iOS和Android平台性能对比BASE64 vs 直接存储访问下图展示了使用BASE64编码与直接文件存储访问的性能差异随着文件大小增加直接存储访问的优势越明显图不同文件大小下BASE64与直接存储访问的加载时间对比显示直接存储访问可节省大量时间 快速安装指南基本安装使用npm安装包npm install --save react-native-fetch-blob或使用CocoaPodsiOSpod react-native-fetch-blob, :path ../node_modules/react-native-fetch-blob自动链接原生模块对于React Native 0.29.2项目react-native link对于旧版本项目0.29rnpm link权限配置Android在AndroidManifest.xml中添加必要权限uses-permission android:nameandroid.permission.INTERNET / uses-permission android:nameandroid.permission.READ_EXTERNAL_STORAGE / uses-permission android:nameandroid.permission.WRITE_EXTERNAL_STORAGE /如果使用Android下载管理器还需添加intent-filter action android:nameandroid.intent.action.DOWNLOAD_COMPLETE/ /intent-filter 基础使用方法导入模块ES6语法import RNFetchBlob from react-native-fetch-blobES5语法var RNFetchBlob require(react-native-fetch-blob).default请求处理流程react-native-fetch-blob会根据请求体类型和Content-Type头自动决定如何发送数据以下是请求处理流程图图react-native-fetch-blob请求处理流程展示了不同请求体类型的处理方式 文件下载教程简单下载内存中适合小文件下载后转为BASE64字符串RNFetchBlob.fetch(GET, http://www.example.com/images/img1.png, { Authorization: Bearer access-token..., }) .then((res) { // 转为BASE64字符串 let base64Str res.base64() // 转为文本 let text res.text() // 转为JSON let json res.json() }) .catch((errorMessage, statusCode) { // 错误处理 })直接下载到存储推荐大文件使用fileCache选项将文件直接保存到临时存储RNFetchBlob .config({ // 启用文件缓存 fileCache: true, // 可选添加文件扩展名 appendExt: png }) .fetch(GET, http://www.example.com/file/example.zip, { // 请求头 }) .then((res) { // 获取文件路径 console.log(文件保存路径: , res.path()) })指定下载路径使用path选项指定自定义文件路径let dirs RNFetchBlob.fs.dirs RNFetchBlob .config({ // 指定保存路径 path: dirs.DocumentDir /path-to-file.anything }) .fetch(GET, http://www.example.com/file/example.zip, { // 请求头 }) .then((res) { console.log(文件保存路径: , res.path()) })Android下载管理器集成对于大文件下载推荐使用Android下载管理器它支持系统通知和后台下载图Android下载管理器显示的下载进度通知使用方法RNFetchBlob .config({ addAndroidDownloads: { useDownloadManager: true, // 启用下载管理器 notification: true, // 显示通知 title: 文件下载, // 通知标题 description: 正在下载文件..., // 通知描述 mime: application/pdf, // 文件MIME类型 mediaScannable: true // 允许媒体扫描 } }) .fetch(GET, http://example.com/large-file.pdf) .then((resp) { // 获取下载文件路径 console.log(下载文件路径: , resp.path()) }) 文件上传教程基础上传BASE64数据将BASE64编码的图片上传RNFetchBlob.fetch(POST, https://content.dropboxapi.com/2/files/upload, { Authorization: Bearer access-token..., Dropbox-API-Arg: JSON.stringify({ path: /img-from-react-native.png, mode: add, autorename: true }), Content-Type: application/octet-stream, }, base64ImageString) .then((res) { console.log(res.text()) }) .catch((err) { // 错误处理 })从存储上传文件使用RNFetchBlob.wrap()方法上传本地文件RNFetchBlob.fetch(POST, https://content.dropboxapi.com/2/files/upload, { Authorization: Bearer access-token..., Dropbox-API-Arg: JSON.stringify({ path: /img-from-storage.png, mode: add, autorename: true }), Content-Type: application/octet-stream, }, RNFetchBlob.wrap(PATH_TO_THE_FILE)) .then((res) { console.log(res.text()) }) .catch((err) { // 错误处理 })表单数据上传multipart/form-data上传表单数据和文件RNFetchBlob.fetch(POST, http://www.example.com/upload-form, { Authorization: Bearer access-token, Content-Type: multipart/form-data, }, [ // 表单字段 { name: username, data: john_doe }, // 上传文件 { name: avatar, filename: avatar.png, data: RNFetchBlob.wrap(PATH_TO_THE_FILE) }, // 带自定义MIME类型的文件 { name: document, filename: resume.pdf, type: application/pdf, data: RNFetchBlob.wrap(PATH_TO_PDF_FILE) } ]).then((resp) { // 处理响应 }).catch((err) { // 错误处理 })⏱️ 上传下载进度跟踪跟踪上传和下载进度RNFetchBlob.fetch(POST, http://www.example.com/upload, { Content-Type: octet-stream }, base64DataString) // 上传进度 .uploadProgress((written, total) { console.log(上传进度: , (written / total * 100).toFixed(2) %) }) // 下载进度 .progress((received, total) { console.log(下载进度: , (received / total * 100).toFixed(2) %) }) .then((resp) { // 处理响应 }) .catch((err) { // 错误处理 }) 文件系统操作react-native-fetch-blob提供了丰富的文件系统操作API以下是常用操作文件路径常量const dirs RNFetchBlob.fs.dirs; // 常用目录 console.log(文档目录: , dirs.DocumentDir); console.log(缓存目录: , dirs.CacheDir); console.log(SD卡目录: , dirs.SDCardDir); // Android only读取文件RNFetchBlob.fs.readFile(PATH_TO_FILE, utf8) .then((data) { console.log(文件内容: , data); }) .catch((err) { console.log(读取错误: , err); });写入文件RNFetchBlob.fs.writeFile(PATH_TO_FILE, 文件内容, utf8) .then(() { console.log(文件写入成功); }) .catch((err) { console.log(写入错误: , err); });删除文件RNFetchBlob.fs.unlink(PATH_TO_FILE) .then(() { console.log(文件删除成功); }) .catch((err) { console.log(删除错误: , err); });创建目录RNFetchBlob.fs.mkdir(PATH_TO_DIR) .then(() { console.log(目录创建成功); }) .catch((err) { console.log(创建目录错误: , err); });列出目录内容RNFetchBlob.fs.ls(PATH_TO_DIR) .then((files) { console.log(目录内容: , files); }) .catch((err) { console.log(列出目录错误: , err); }); 高级技巧与最佳实践大文件处理对于大文件使用流操作可以避免内存问题// 读取流 RNFetchBlob.fs.readStream( PATH_TO_LARGE_FILE, base64, 4095 // 缓冲区大小 ) .then((ifstream) { ifstream.open(); ifstream.onData((chunk) { // 处理数据块 }); ifstream.onEnd(() { console.log(文件读取完成); }); }); // 写入流 RNFetchBlob.fs.writeStream( PATH_TO_FILE, utf8, true // 追加模式 ) .then((ofstream) { ofstream.write(追加内容); ofstream.close(); });取消请求取消正在进行的请求let task RNFetchBlob.fetch(GET, http://example.com/large-file.zip); task.then(() { console.log(请求完成); }) .catch((err) { console.log(请求取消或出错: , err); }); // 需要时取消请求 task.cancel();缓存管理管理下载的缓存文件// 单个文件缓存清理 RNFetchBlob.config({ fileCache: true }) .fetch(GET, http://example.com/file) .then((res) { // 使用完成后清理 res.flush(); }); // 使用会话管理多个文件 RNFetchBlob.config({ fileCache: true, session: my-session }) .fetch(GET, http://example.com/file1); // 清理整个会话的缓存 RNFetchBlob.session(my-session).dispose() .then(() { console.log(会话缓存清理完成); });处理自签名SSL证书连接使用自签名SSL证书的服务器RNFetchBlob.config({ trusty: true // 允许不安全的SSL连接 }) .fetch(GET, https://my-self-signed-server.com) .then((resp) { // 处理响应 }); 常见问题与解决方案Android权限问题确保在AndroidManifest.xml中添加了必要权限并在Android 6.0上请求运行时权限文件路径问题使用RNFetchBlob.fs.dirs提供的路径常量避免硬编码路径大文件性能问题使用文件流和直接存储访问避免BASE64编码大文件iOS文件访问限制注意iOS的沙盒限制无法访问应用外部的文件网络请求取消使用task.cancel()取消请求并在catch中处理取消事件 更多资源完整API文档API References故障排除Trouble ShootingGitHub仓库通过git clone https://gitcode.com/gh_mirrors/re/react-native-fetch-blob获取源码react-native-fetch-blob为React Native开发者提供了强大的文件处理能力无论是简单的文件下载还是复杂的文件上传都能轻松应对。通过本教程你应该已经掌握了其核心功能和最佳实践开始在你的项目中应用吧【免费下载链接】react-native-fetch-blobA project committed to making file access and data transfer easier, efficient for React Native developers.项目地址: https://gitcode.com/gh_mirrors/re/react-native-fetch-blob创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考