当前位置:   article > 正文

uniapp APP端一键读写文件并上传文件_plus.io.requestfilesystem

plus.io.requestfilesystem

目录

读写文件

上传文件

完整代码


读写文件

使用的是 HTML5产业联盟提供的方法

通过plus.io可获取文件系统管理对象。

        IO模块管理本地文件系统,用于对文件系统的目录浏览、文件的读取、文件的写入等操作。

IO里面有个方法 

  • requestFileSystem: 请求本地文件系统对象
    • plus.io.requestFileSystem( type, succesCB, errorCB );

参数:

  • type: ( Number ) 必选 本地文件系统常量

    可取plus.io下的常量,如plus.io.PRIVATE_DOC、plus.io.PUBLIC_DOCUMENTS等。

  • succesCB: FileSystemSuccessCallback ) 必选 请求文件系统成功的回调
  • errorCB: FileErrorCallback ) 可选 请求文件系统失败的回调

plus.io.PRIVATE_DOC

  1. plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
  2. console.error('请求文件系统成功', fs);
  3. },
  4. function(err) {
  5. console.error('请求文件系统失败', err);
  6. }
  7. );

请求成功返回的fs里面有个属性 root, fs.root是根目录操作对象DirectoryEntry,里面提供了创建打开文件方法 

  • getFile: 创建或打开文件
    • entry.getFile( path, flag, succesCB, errorCB );

参数:

  • path: ( String ) 必选 要操作文件相对于当前目录的地址
  • flag: Flags ) 可选 要操作文件或目录的参数
  • succesCB: FileEntrySuccessCallback ) 可选 创建或打开文件成功的回调函数
  • errorCB: FileErrorCallback ) 可选 创建或打开文件失败的回调函数
  1. plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
  2. // 创建文件
  3. fs.root.getFile('myTxt/1..txt', {
  4. create: true
  5. }, function(fileEntry) {
  6. console.error('创建文件成功', fileEntry);
  7. },
  8. function(err) {
  9. console.error('创建文件失败', err);
  10. });
  11. },
  12. function(err) {
  13. console.error('请求文件系统失败', err);
  14. });
  15. }

请求成功返回的 fileEntry 里面有个方法 createWriter

  • createWriter: 获取文件关联的写文件操作对象FileWriter
    • entry.createWriter( succesCB, errorCB );

参数:

  1. plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
  2. // 创建文件
  3. fs.root.getFile('myTxt/1..txt', {
  4. create: true
  5. }, function(fileEntry) {
  6. // 创建写入流
  7. fileEntry.createWriter(function(writer) {
  8. console.error('创建写入流成功', writer);
  9. },
  10. function(err) {
  11. console.error('创建写入流失败', err);
  12. });
  13. },
  14. function(err) {
  15. console.error('创建文件失败', err);
  16. });
  17. },
  18. function(err) {
  19. console.error('请求文件系统失败', err);
  20. });
  21. }

请求成功返回的 writer 里面有个方法 write代码

  • write: 向文件中写入数据
    • writer.write( data );

参数:

  • data : ( String ) 必选 要写入的数据内容

注意: 如果文件中已经存在数据,新写入的数据将覆盖已有数据。

返回的 writer 里面还有个 onwriteend 回调函数,文件写入操作完成时的回调函数

  1. plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
  2. // 创建文件
  3. fs.root.getFile('myTxt/1..txt', {
  4. create: true
  5. }, function(fileEntry) {
  6. // 创建写入流
  7. fileEntry.createWriter(function(writer) {
  8. // 设置写入内容
  9. writer.write('123');
  10. // 写入完成回调
  11. writer.onwriteend = function(res) {
  12. console.log('写入文件成功', res.target.fileName);
  13. };
  14. // 写入错误回调
  15. writer.onerror = function(err) {
  16. console.error('写入文件失败', err);
  17. };
  18. },
  19. function(err) {
  20. console.error('创建写入流失败', err);
  21. });
  22. },
  23. function(err) {
  24. console.error('创建文件失败', err);
  25. });
  26. },
  27. function(err) {
  28. console.error('请求文件系统失败', err);
  29. });

返回的 res.target.fileName,就是操作文件的路径

上传文件

利用uniapp提供的上传方法 uni.uploadFile,也可以利用其它的请求方式比如 Ajax 上传文件,根据返回的 res.target.fileName 文件路径,赋值进去就可以了

  1. const pathUrl = res.target.fileName
  2. if (pathUrl!= '') {
  3. uni.uploadFile({
  4. url: '上传地址API',
  5. filePath: pathUrl,
  6. name: "file",
  7. success: (uploadFileRes) => {
  8. console.log(uploadFileRes, '返回的下载地址');
  9. },
  10. complete: () => {
  11. },
  12. });
  13. }

完整代码

  1. Download() {
  2. // 请求文件系统
  3. plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
  4. // 创建文件
  5. fs.root.getFile('myTxt/1..txt', {
  6. create: true
  7. }, function(fileEntry) {
  8. // 创建写入流
  9. fileEntry.createWriter(function(writer) {
  10. // 设置写入内容
  11. writer.write('123');
  12. // 写入完成回调
  13. writer.onwriteend = function(res) {
  14. console.log('写入文件成功', res.target.fileName);
  15. const pathUrl = res.target.fileName
  16. if (pathUrl!= '') {
  17. uni.showLoading();
  18. uni.uploadFile({
  19. url: '上传地址API',
  20. filePath: pathUrl,
  21. name: "file",
  22. success: (uploadFileRes) => {
  23. console.log(uploadFileRes, '返回的下载地址');
  24. },
  25. complete: () => {
  26. uni.hideLoading();
  27. },
  28. });
  29. }
  30. };
  31. // 写入错误回调
  32. writer.onerror = function(err) {
  33. console.error('写入文件失败', err);
  34. };
  35. },
  36. function(err) {
  37. console.error('创建写入流失败', err);
  38. });
  39. },
  40. function(err) {
  41. console.error('创建文件失败', err);
  42. });
  43. },
  44. function(err) {
  45. console.error('请求文件系统失败', err);
  46. });
  47. }

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读