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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
微信小程序 获取设备信息 API实例详解
Oct 02 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 Javascript
微信小程序异步处理详解
Nov 10 Javascript
vue实现前进刷新后退不刷新效果
Jan 26 Javascript
vue指令做滚动加载和监听等
May 26 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
vue-model实现简易计算器
Aug 17 Javascript
Vue仿百度搜索功能
Dec 28 Vue.js
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中的类-什么叫类
2006/11/20 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
smarty中常用方法实例总结
2015/08/07 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
Javascript 面向对象(二)封装代码
2012/05/23 Javascript
JS 实现导航栏悬停效果(续2)
2013/09/24 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
使用documentElement正确取得当前可见区域的大小
2014/07/25 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
jquery实现的简单二级菜单效果代码
2015/09/22 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
2016/11/29 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
js实现数字从零慢慢增加到指定数字示例
2019/11/07 Javascript
Python代码的打包与发布详解
2014/07/30 Python
Python按行读取文件的实现方法【小文件和大文件读取】
2016/09/19 Python
tf.truncated_normal与tf.random_normal的详细用法
2018/03/05 Python
浅述python中深浅拷贝原理
2018/09/18 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
您在慕尼黑的跑步商店:Lauf-bar
2019/10/11 全球购物
网络工程专业毕业生推荐信
2013/10/28 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
保护地球的标语
2014/06/17 职场文书
个人查摆剖析材料
2014/10/16 职场文书
2015年招聘工作总结
2014/12/12 职场文书
开会通知短信大全
2015/04/20 职场文书
深入理解pytorch库的dockerfile
2022/06/10 Python