uniapp遇到的选图片的大坑

文章目录

遇到的问题

使用uniapp和uview进行图片上传,使用组件u-upload来实现

需求是仅使用相机进行拍照,设置source-type仅为camera,运行后,在手机浏览器上没有问题,基座运行到真机上没有问题

但是,如果是uniapp打包了一个app壳,内部嵌套的h5页面,那么即使设置了仅camera,一样会显示选择弹窗,选择相机还是图库

解决思路

  1. 查看u-upload源码,发现调用的是uni.chooseImage的方法,还是有选择弹窗

考虑到,查看如何调用到弹窗中的相机点击事件,直接调用该事件应该就可以

  1. 查看uni-app源代码,查找相机的点击事件,发现是调用了plus.camera的方法
  2. 为了方便调用,且与原来的组件保持一致,采用的方式是复制uview的u-upload组件代码,修改其selectFile方法,进行修改:如果拿不到plus,说明是h5页面获取,还调用原有的uni.chooseImage方法,写死sourceType为’camera’;如果拿得到plus,那么就调用plus.camera的方法

拿到地址后,加载本地不显示,上传无资源

使用plus.camera的方式拿到了图片路径,然后显示的时候,发现不显示;然后进行上传的时候,抓包发现上传上去的文件没有后缀,且后台拿不到文件。

因为是壳内嵌h5,js没有访问本地文件的权限,所以即使拿到了路径,但是依然无法显示,且上传没传上资源文件

读取文件

然后查看uni.upload的方法,发现上传的为文件的base64编码,不只是文件路径
所以去找如何获取对应的base64编码文件。

后来发现h5+的api中,io部分有获取base64相关的api,调用后获取到文件的base64

压缩图片

对原base64进行压缩后上传,就在网上找的例子
通过:新建image和canvas,设置canvas后drawImage的方式来进行图片压缩
draw后,再拿取新的图片的base64

最后上传

调用到uniapp的upload上传

用到的工具

vscode:查看base64的时候使用
抓包工具:查看上传图片时的大小等信息

用到的知识

js没有权限访问文件
base64
h5+

需要扩展的

vscode的使用
抓包工具的使用
h5+基本功能的了解
base64的基本了解

上一篇:openMVG源码学习(一)main_SfMInit_ImageListing


下一篇:关于camera的转载