HaaS UI小程序解决方案基础教学之五: JSAPI文件管理

简介: File JSAPI是HaaS UI提供的一个轻量级文件接口,特别适用于存储小程序运行所需的文件,如文本、图片、视频等资源文件,这些文件都可以通过File JSAPI来存取。

名词解释

AliOS Things: 阿里云智能IoT团队自研的物联网操作系统

HaaS:全称是Hardware as a Service,阿里云智能IoT团队基于AliOS Things系统推出的硬件即服务

HaaS UI:全称是Hardware as a Service User Interface,是源自AliOS Things操作系统上的一套应用&图形解决方案,支持C/C++和 JS两种开发语言

1、 File JSAPI简介

File JSAPI是HaaS UI提供的一个轻量级文件接口,特别适用于存储小程序运行所需的文件,如文本、图片、视频等资源文件,这些文件都可以通过File JSAPI来存取。

File JSAPI的作用域为当前小程序应用,包含的接口如下:

接口宿主 JSAPI 调用方法 接口功能
file saveFile $falcon.jsapi.file.saveFile({apFilePath: 'xxx'}) 文件管理
getSavedFileInfo $falcon.jsapi.file.getSavedFileInfo({apFilePath: 'xxx'})
getFileInfo $falcon.jsapi.file.getFileInfo({apFilePath: 'xxx'})
getSavedFileList $falcon.jsapi.file.getSavedFileList({})
removeSavedFile $falcon.jsapi.file.removeSavedFile({apFilePath: 'xxx'})

1.1、 file.saveFile

file.saveFile是保存文件到本地(本地文件大小总容量限制:10 MB)的 API。

调用 my.saveFile 成功后,可在"MINIAPP_DATAROOT file/appid/"路径下查看保存的文件,其中appid是小程序的id。

入参

Object 类型,属性如下:

属性 类型 必填 描述
apFilePath String 文件路径。
callback Function 回调函数,包含result参数。

示例代码

file.saveFile({
  apFilePath: 'd:\\demo.jpg',
}, result => {console.log(result)});

success 回调函数

属性 类型 描述
apFilePath String 文件保存路径。

1.2、 file.getSavedFileInfo

file.getSavedFileInfo 是获取"MINIAPP_DATAROOT file/appid/"路径下保存的所有文件信息的 API,其中appid是小程序的id。

入参

入参为Object类型,属性如下:

属性 类型 必填 描述
apFilePath String 文件路径。
callback Function 回调函数,包含result参数。

示例代码

file.saveFile({
  apFilePath: 'd:\\demo.jpg',
}, result => {
  result && !result.error && file.getSavedFileInfo({
    apFilePath: result["apFilePath"],
  }, result => {console.log(result)});
});

1.3、file.getFileInfo

getFileInfo 是获取文件信息的 API。

入参

入参为Object类型,属性如下:

属性 类型 必填 描述
apFilePath String 文件路径。
callback Function 回调函数,包含result参数。

示例代码

file.getFileInfo({
  apFilePath: "/data/mini_app/file/0000000000000001/demo.jpg",
}, result => {console.log(result)});

success 回调函数

入参为Object类型,属性如下

名称 类型 描述
size Number 文件大小。
digest String 摘要结果。

1.4、 file.getSavedFileList

file.getSavedFileList 是获取保存的所有文件信息的 API。

入参

Object 类型,属性如下:

属性 类型 必填 描述
appId String 小程序的 appId。
callback Function 回调函数,包含result参数。

示例代码

file.getSavedFileList({
}, result => {
  result && !result.error && console.log(result);
});

success 回调函数

属性 类型 描述
fileList List 文件列表。
column1 column2 column3
column1 column2 column3

File 对象属性

属性 类型 描述
size Number 文件大小。
createTime Number 创建时间。
apFilePath String 文件路径。

1.5、 file.removeSavedFile

file.removeSavedFile 是删除某个保存的文件的 API。

入参

Object 类型,属性如下:

属性 类型 必填 描述
apFilePath String 文件路径。

示例代码

file.getSavedFileList({
}, result => {
  result && !result.error && file.removeSavedFile({
    apFilePath: result.fileList[0].apFilePath,
  }, result => {console.log(result)});
});

success 回调函数

属性 类型 描述
apFilePath String 被删除文件的路径。

2、File JSAPI使用教程

2.1、 file对象获取

在使用File JSAPI前,需要先获取$falcon.jsapi的file对象,所有的接口都是通过file对象进行调用的。

const storage = $falcon.jsapi.file;

2.2、 文件存储

文件存储操作需要通过步骤1获取的file对象来进行,具体可通过file.saveFile来实现键值对参数的存储,可存储的文件类型有txt、png、jpg、zip等常见类型。

文件类型/文件操作 写入操作
txt 支持
png 支持
jpg 支持
zip 支持
... 支持

在进行文件存储时,有两种方式,一种是同步存储,另一种是异步存储。同步存储直接返回存储结果,异步存储需要在async函数中操作,通过await返回存储结果。

接口名/参数列表 入参1 入参2
saveFile apFilePath : 'xxx' (result) => { console.log(result); }

同步存储方式:

const file = $falcon.jsapi.file;
file.saveFile(
  {
    apFilePath: "d:\\demo.jpg",
  },
  (result) => {
    console.log(result);
  }
);

异步存储方式:

const file = $falcon.jsapi.file;
let result = await storage.setStorage({
  key: 'key',               // key
  data: 'storage content',  // value
});
console.log(result);

2.3、 其他文件操作

其他文件操作也需要通过步骤1获取的file对象来进行,包含getSavedFileInfo、getFileInfo、getSavedFileList和removeSavedFile,也支持同步和异步两种操作。

3、 File JSAPI调用示例

本节将以保存一张图片为示例,介绍如何去调用File JSAPI,具体包含保存文件、获取保存的文件信息、获取文件信息、获取保存的文件列表和删除文件。调用saveFile(),就可将文件存储到当前小程序的私有文件路径下,以供小程序使用。文件使用完毕后,调用removeSavedFile(),就可将之删除。

3.1、 保存文件

从给定apFilePath中获取要保存的文件路径,并调用saveFile()将之保存到小程序的私有文件路径下:

  const file = $falcon.jsapi.file;
  file.saveFile(
    {
      apFilePath: "d:\\demo.jpg",
    },
    (result) => {
      console.log(result);
    }
  );
}

5b56beec2352e4b2f392f792f2225669.gif

3.2、 获取保存的文件信息

要获取某个已保存的文件的信息,可通过调用getSavedFileInfo()实现:

getSavedFileInfo() {
  const file = $falcon.jsapi.file;
  file.saveFile(
    {
      apFilePath: "d:\\demo.jpg",
    },
    (result) => {
      result &&
        !result.error &&
        file.getSavedFileInfo(
          {
            apFilePath: result["apFilePath"],
          },
          (result) => {
            console.log(result);
          }
        );
    }
  );
}

2.gif

3.3、 获取文件信息

要获取某个文件的信息,可通过调用getFileInfo()实现:

  const file = $falcon.jsapi.file;
  file.getFileInfo(
    {
      apFilePath: "d:\\demo.jpg",
    },
    (result) => {
      console.log(result);
    }
  );
}

3.gif

3.4、 获取保存的文件列表

要获取已保存的文件的列表,可通过调用getSavedFileList()实现:

  const file = $falcon.jsapi.file;
  file.getSavedFileList({}, (result) => {
    result && !result.error && console.log(result);
  });
}

4.gif

3.5、 删除文件

删除通过saveFile()保存的文件,可以调用removeSavedFile()实现:

  const file = $falcon.jsapi.file;
  file.getSavedFileList({}, (result) => {
    result &&
      !result.error &&
      file.removeSavedFile(
        {
          apFilePath: result.fileList[0].apFilePath,
        },
        (result) => {
          console.log(result);
        }
      );
  });
}

5.gif

4、开发者技术支持

如需更多技术支持,可加入钉钉开发者群,或者关注微信公众号

image.png

更多技术与解决方案介绍,请访问阿里云AIoT首页https://iot.aliyun.com/

相关文章
|
1月前
|
人工智能 小程序 前端开发
一个小程序轻量AR体感游戏,开发实现解决方案
针对青少年运动兴趣不足问题,AR体感游戏凭借沉浸式互动体验脱颖而出。结合小程序“AI运动识别”插件与WebGL渲染技术,可实现无需外设的轻量化AR健身游戏,如跳糕、切水果等,兼具趣味性与锻炼效果,适用于儿童健身及职工团建,即开即玩,低门槛高参与。
|
6月前
|
小程序 前端开发
2025商业版拓展校园圈子论坛网络的创新解决方案:校园跑腿小程序系统架构
校园跑腿小程序系统是一款创新解决方案,旨在满足校园配送需求并拓展校友网络。跑腿员可接单配送,用户能实时跟踪订单并评价服务。系统包含用户、客服、物流、跑腿员及订单模块,功能完善。此外,小程序增设信息咨询发布、校园社区建设和活动组织等功能,助力校友互动、经验分享及感情联络,构建紧密的校友网络。
268 1
2025商业版拓展校园圈子论坛网络的创新解决方案:校园跑腿小程序系统架构
|
6月前
|
JSON 监控 小程序
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
594 14
微信百度字节小程序包过大解决方案(实战经验总结)-优雅草卓伊凡|果果|小无
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
2636 1
|
7月前
|
小程序 UED
拓展校友网络的创新解决方案:校园论坛圈子小程序+跑腿+二手市场系统
这是一款基于小程序的校园跑腿服务平台,支持多种注册登录方式、下单支付、跑腿接单配送、订单跟踪评价及物流查询功能,并配备客服模块提升用户体验。系统包含用户、客服、物流、跑腿员和订单五大核心模块,功能完善。此外,平台还拓展了校友网络功能,如信息咨询发布、校园社区建设和活动组织等,旨在增强校友互动与联系,形成紧密的校友生态。
251 4
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
846 58
|
人工智能 小程序 搜索推荐
uni app下开发AI运动小程序解决方案
本文介绍了在小程序中实现AI运动识别的解决方案。该方案依托于UNI平台,通过高效便捷的插件形式,实现包括相机抽帧控制、人体识别、姿态识别等在内的多项功能,无需依赖后台服务器,大幅提高识别效率和用户体验。方案内置多种运动模式,支持自定义扩展,适用于AI健身、云上赛事、AI体测等多场景,适合新开发和存量改造项目。
|
小程序 机器人 开发者
QQ 小程序已发布,但无法被搜索的解决方案
我的 QQ 小程序在 2024 年 8 月就已经审核通过,上架后却一直无法被搜索到。打开后,再在 QQ 上下拉查看 “最近使用”,发现他出现一下又马上消失。
213 2
|
小程序 开发者 UED
支付宝小程序UI/UX设计原则与最佳实践
支付宝小程序UI/UX设计原则与最佳实践
591 6
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
992 0