文章目录

  • 遇到的问题
  • 解决思路
  • 拿到地址后，加载本地不显示，上传无资源
  • 读取文件
  • 压缩图片
  • 最后上传
  • 用到的工具
  • 用到的知识
  • 需要扩展的


遇到的问题

使用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的基本了解