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

本文介绍了如何使用react-native-fs库进行文件操作,包括下载图片、文件、视频和音频,将文本写入和读取txt文件,追加文本,删除文件,以及iOS平台的文件上传。提供了详细的示例代码。
摘要由CSDN通过智能技术生成

本文内容:

react-native-fs的简单使用

下载文件(图片、文件、视频、音频)

将文本写入本地 txt

读取txt文件内容

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

删除文件

上传文件 only iOS

安装步骤

第一步:

第二步:

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

简单使用

下载文件

// 图片

// 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 = '//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

// write the file

RNFS.writeFile(path,'这是一段文本,YES','utf8')

.then((success) => {

console.log('path',path);

})

.catch((err) => {

console.log(err.message);

});

}

读取txt文件内容

return RNFS.readFile(path)

.then((result) => {

console.log(result);

this.setState({

readTxtResult: result,})

})

.catch((err) => {

console.log(err.message);

});

}

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

return RNFS.appendFile(path,'新添加的文本','utf8')

.then((success) => {

console.log('success');

})

.catch((err) => {

console.log(err.message);

});

}

删除文件

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

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

const options = {

toUrl: uploadUrl,files: [{name: 'myfile',filename: 'test.txt',filepath: uploadSrc,filetype: 'text/plain'}],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);

});

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值