一句话结论:多人共享的图片需要云端保存,推荐用 CloudBase 或 Supabase 拓展的云存储上传图片,再用返回的网址显示。

一般来说,类似于购物App,你可以从手机App上传物品图片,然后他人也可以在手机App上查看你上传的物品的照片,这时图片就必须采用云端保存的方式。
本文主要就是聊一聊 App Inventor 2 进行图片上传及云端图片访问这种场景的App开发思路,及关键步骤的一些指导。
图片上传云端保存
推荐:使用 CloudBase / Supabase 云存储(不用自己搭服务器)
CloudBase 拓展(腾讯云开发,国内)和 Supabase 拓展(海外,国内可访问)都带有文件存储组件:用 UploadFile 把手机上的图片传上云端,再用 GetFileUrl 换到访问地址,直接交给“图像”组件显示。图片文件存在你自己的云账号里,不用写服务端代码,是目前门槛最低的做法。
图片和商品信息一起保存时,把云端路径存进对应的数据库组件(CloudBaseNoSQL / SupabasePgSQL),其他人查询到数据后再用 GetFileUrl 换取地址显示。CloudBase 和 Supabase 私有桶给的是临时地址,过期就打不开,所以数据库里存路径而不是地址;Supabase 公开桶可以用 GetPublicUrl 拿长期有效的地址。
1、图片Base64化,保存“网络微数据库”
可以将图片Base64化后存储到网络微数据库。下载后,Base解码还原图片文件到手机上,使用“图像”组件显示即可。
不过,由于图片体积一般不小,Base64后大概率还会膨胀,而网络微数据库单Key存储大小有限(具体参考文档),这时考虑采用分片的形式,比如将原Base64字符串切分成 1KB 为一份的若干份,分别存储云端,下载过程则是将分片完整合并,还原完整Base64字符串。
2、使用“Web客户端”组件上传图片到私有服务器
具体请参考:《通用(二级制)文件上传:通过Web客户端POST文件》
这是通用的文件上传到服务器的流程,当然图片文件也是一样。
推荐这种方式,App如果要长期稳定使用的话,有必要搭配一个后端私有服务器,不仅图片,连视频、文件都可以自定义上传及网络访问,是开发网络App的最正规方式。
另外,除了私有云服务器 + PHP/Node.js/Python 后端代码外,也可以采用OSS方案,各大主流云厂商都提供有OSS服务,也会开放api访问,通过api也能将我们手机的本地图片或文件上传至OSS,然后通过OSS的url访问。由于OSS产品相对专业,这里不做展开,仅提供一种思路。
云服务器推荐:私有云数据库、云图片好搭档 2核2G 3M特惠主机 99元/年!
3、上传图片至第三方图床
原理和上面一样,将图片上传至服务器,然后通过网络url访问图片。不同的是,有一些第三方图床服务已经提供api,我们只需要按照其文档上传指定格式的图片文件即可,无需额外编写服务端代码。
具体第三方图床产品请自行去搜索,当然也可以采用开源图床方案,也可私有化部署,有兴趣可以联系客服咨询。
App Inventor 2 中文网为何不搭建一个图床服务器?
其实,是有这个打算的,这样可以方便大家云端存储多媒体及文件,但是这个产品肯定不会完全免费,涉及到用户费用管理、用户文件管理等。
这个倒不是最重要的,最最重要的是图片或文件还会有合规及法律风险,因此目前此方案还不成熟,只能暂时作罢。
云端图片访问
最简单:“图像”组件直接填图片地址
“图像”组件的“图片”属性可以直接设成 https://… 开头的网络图片地址,组件会自己下载并显示;“列表显示框”的图片和“图片轮播”组件也一样。下面两种方法适用于需要先把图片存到手机上的场景。
1、使用“Web浏览器”组件,访问图片url
参考代码如下:

扫码添加客服咨询