react-native-fs实现文件下载、文本存储的示例代码


Posted in Javascript onSeptember 22, 2017

本文内容:

react-native-fs的简单使用

  1. 下载文件(图片、文件、视频、音频)
  2. 将文本写入本地 txt
  3. 读取txt文件内容
  4. 在已有的txt上添加新的文本
  5. 删除文件
  6. 上传文件 only iOS

github链接: https://github.com/itinance/react-native-fs

另外还有一个下载的库 :https://github.com/wkh237/react-native-fetch-blob

安装步骤

第一步:

npm install react-native-fs --save

第二步:

react-native link react-native-fs

OK 即可开始使用(不放心的可以按照github上的对比一下)

简单使用

import RNFS from 'react-native-fs';

下载文件

/*下载文件*/
  downloadFile() {
    // On Android, use "RNFS.DocumentDirectoryPath" (MainBundlePath is not defined)

    // 图片
    // const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.jpg`;
    // const formUrl = 'http://img.kaiyanapp.com/c7b46c492261a7c19fa880802afe93b3.png?imageMogr2/quality/60/format/jpg';

    // 文件
    // const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.zip`;
    // const formUrl = 'http://files.cnblogs.com/zhuqil/UIWebViewDemo.zip';

    // 视频
    // const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.mp4`;
    // http://gslb.miaopai.com/stream/SnY~bbkqbi2uLEBMXHxGqnNKqyiG9ub8.mp4?vend=miaopai&
    // https://gslb.miaopai.com/stream/BNaEYOL-tEwSrAiYBnPDR03dDlFavoWD.mp4?vend=miaopai&
    // const formUrl = 'https://gslb.miaopai.com/stream/9Q5ADAp2v5NHtQIeQT7t461VkNPxvC2T.mp4?vend=miaopai&';

    // 音频
    const downloadDest = `${RNFS.MainBundlePath}/${((Math.random() * 1000) | 0)}.mp3`;
    // http://wvoice.spriteapp.cn/voice/2015/0902/55e6fc6e4f7b9.mp3
    const formUrl = 'http://wvoice.spriteapp.cn/voice/2015/0818/55d2248309b09.mp3';

    const options = {
      fromUrl: formUrl,
      toFile: downloadDest,
      background: true,
      begin: (res) => {
        console.log('begin', res);
        console.log('contentLength:', res.contentLength / 1024 / 1024, 'M');
      },
      progress: (res) => {

        let pro = res.bytesWritten / res.contentLength;

        this.setState({
          progressNum: pro,
        });
      }
    };
    try {
      const ret = RNFS.downloadFile(options);
      ret.promise.then(res => {
        console.log('success', res);

        console.log('file://' + downloadDest)

      }).catch(err => {
        console.log('err', err);
      });
    }
    catch (e) {
      console.log(error);
    }

  }

将文本写入本地 txt

/*将文本写入本地 txt*/
  writeFile() {
    // create a path you want to write to
    const path = RNFS.MainBundlePath + '/test.txt';

    // write the file
    RNFS.writeFile(path, '这是一段文本,YES', 'utf8')
      .then((success) => {
        console.log('path', path);
      })
      .catch((err) => {
        console.log(err.message);
      });
  }

读取txt文件内容

/*读取txt文件内容*/
  readFile() {
    // create a path you want to delete
    const path = RNFS.MainBundlePath + '/test.txt';

    return RNFS.readFile(path)
      .then((result) => {
        console.log(result);

        this.setState({
          readTxtResult: result,
        })
      })
      .catch((err) => {
        console.log(err.message);

      });
  }

在已有的txt上添加新的文本

/*在已有的txt上添加新的文本*/
  appendFile() {
    const path = RNFS.MainBundlePath + '/test.txt';

    return RNFS.appendFile(path, '新添加的文本', 'utf8')
      .then((success) => {
        console.log('success');
      })
      .catch((err) => {
        console.log(err.message);

      });
  }

删除文件

/*删除文件*/
  deleteFile() {
    // create a path you want to delete
    const path = RNFS.MainBundlePath + '/test.txt';

    return RNFS.unlink(path)
      .then(() => {
        console.log('FILE DELETED');
      })
      // `unlink` will throw an error, if the item to unlink does not exist
      .catch((err) => {
        console.log(err.message);
      });
  }

上传文件 only iOS

/*上传文件 only iOS*/
  uploadFile() {
    const uploadSrc = `${RNFS.MainBundlePath}/test.txt`;

    const uploadUrl = 'http://buz.co/rnfs/upload-tester.php';

    const options = {
      toUrl: uploadUrl,
      files: [{name: 'myfile', filename: 'test.txt', filepath: uploadSrc, filetype: 'text/plain'}],
      background: true,
      method: 'POST', // PUT
      begin: (res) => {
        console.log('begin', res);
      },
      progress: (res) => {
        console.log('progress', res);
      }
    };

    const ret = RNFS.uploadFiles(options);

    return ret.promise.then(res => {
      const response = JSON.parse(res.body);
      console.log(response);

    })
      .catch(err => {
        console.log('err', err);
      });
  }

demo:https://github.com/chjwrr/RN-react-native-fs

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 性能优化指南(3)
May 21 Javascript
jquery $.getJSON()跨域请求
Dec 21 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
Javascript中With语句用法实例
May 14 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
Bootstrap整体框架之CSS12栅格系统
Dec 15 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
详解vue.js之props传递参数
Dec 12 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 Javascript
vuex 中插件的编写案例解析
Jun 10 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
Sep 22 #jQuery
解决html-jquery/js引用外部图片时遇到看不了或出现403的问题
Sep 22 #jQuery
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 #Javascript
js表单序列化判断空值的实例
Sep 22 #Javascript
VUE中的无限循环代码解析
Sep 22 #Javascript
详解vue中引入stylus及报错解决方法
Sep 22 #Javascript
EL表达式截取字符串的函数说明
Sep 22 #Javascript
You might like
php 变量未定义等错误的解决方法
2011/01/12 PHP
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
经验几则 推荐
2006/09/05 Javascript
javascript 框架小结 个人工作经验
2009/06/13 Javascript
jQuery 选择器项目实例分析及实现代码
2012/12/28 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
教你一步步用jQyery实现轮播器
2016/12/18 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
详解vue slot插槽的使用方法
2017/06/13 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
React Native中的RefreshContorl下拉刷新使用
2017/10/09 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
viewer.js实现图片预览功能
2020/06/24 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python实现批量更换指定目录下文件扩展名的方法
2016/09/19 Python
python实现批量修改文件名代码
2017/09/10 Python
浅谈Django自定义模板标签template_tags的用处
2017/12/20 Python
Python 图像对比度增强的几种方法(小结)
2019/09/25 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
HTML5的文档结构和新增标签完全解析
2017/04/21 HTML / CSS
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
德国玩具商店:Planet Happy DE
2021/01/16 全球购物
介绍一下Ruby的特点
2013/01/20 面试题
材料加工硕士生求职信
2013/10/10 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
宣传保护环境的公益广告词
2014/03/13 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
保护环境的标语
2014/06/09 职场文书
个人简历自我评价怎么写
2015/03/10 职场文书
2016年春季运动会加油稿
2015/07/22 职场文书