uniapp发布到h5调用Android原生拍照,相册,uniapp如何显示并上传

该博客讲述了在uniapp发布到H5后,如何调用Android原生拍照和相册功能,并将图片回显及上传到服务器。作者遇到uniapp的image组件无法加载Android返回的本地路径,经过尝试,发现需要将图片保存到uniapp的static目录下,然后通过相对路径加载图片。同时,由于uni.uploadFile上传失败,最终采用Android原生上传图片的方法解决问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

先说一下我这边的需求:

uniapp这边发布到h5,然后调用Android原生拍照,选择相册,最后将路径回调到uniapp,uniapp那边image要优先将图片回显出来,并将图片上传到服务器

遇到的问题:

1 调用原生拍照,选择相册回调到uniapp,uniapp的image控件无法展示Android那边回调回来的图片路径,但是如果使用原生image是可以加载出来的
2 原生回调回来的路径 uniapp那边 uni.uploadFile方法上传不成功

解决方案

第一个问题的解决方案:
我们都知道uniapp发布到h5,是如下操作:
HBuilderX打开你的uni-app项目 – > 点发行 - > 网站 - PC Web
在这里插入图片描述
然后将生成的h5文件,copy到Android 的assets目录下,原生那边Activity的webview加载本地h5文件(当然也可以将h5发布到服务器,原生加载url)

我这边将原生Android 拍照和选择图片后,进行压缩,将图片保存到Android私有目录下,然后获取到本地文件的路径,但是直接将这个路径传到uniapp,uniapp 的image是无法加载的,找了网上很多处理方法,无外乎都是 下面处理逻辑 比如:1 uniapp那边image显示的时候在路径前面加上 file://
2 图片路径进行md5,然后image加载,然后上传
这几个方法都试了,我这边image是无论如何都加载不出来
搞的我焦头烂额,认为此路不通的时候,
就和同事一起分析情况,同事提出一个观点,让我瞬间敞亮起来:
他说,由于uniapp那边image控件加载图片要么是在本地static目录要么是网络图片,既然 image是可以加载static目录下的本地文件 ,那就把 图片路径也保存到static目录下,和其他的图片在同一级目录,加载的时候image去加载!
我们都知道Android为了让开发者不随意操作assets目录,这个目录是禁止编辑和操作的,如果之前有这个文件,你可以往这个文件里面写入信息,如果没有,是不能添加文件的!
后来同事又提出一个解决方案,可以将assets目录在app加载的时候copy到私有存储空间,然后再把 拍照和选择图片压缩后的图片放到其他本地图片的同一级目录,试试。
后来按这个方案,果然image加载出来图片了。

方案如下:

public static void copyAssetsDir2Phone(Activity activity, String filePath){
   
        try {
   
            String[] fileList = activity.getAssets().
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

scenelyLiu

您的鼓励将是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值