标签：uniapp 调用 大坑 文件 base64 h5 camera 上传 图片
文章目录
遇到的问题
使用uniapp和uview进行图片上传，使用组件u-upload来实现
需求是仅使用相机进行拍照，设置source-type仅为camera，运行后，在手机浏览器上没有问题，基座运行到真机上没有问题
但是，如果是uniapp打包了一个app壳，内部嵌套的h5页面，那么即使设置了仅camera，一样会显示选择弹窗，选择相机还是图库
解决思路
- 查看u-upload源码，发现调用的是uni.chooseImage的方法，还是有选择弹窗
考虑到，查看如何调用到弹窗中的相机点击事件，直接调用该事件应该就可以
- 查看uni-app源代码，查找相机的点击事件，发现是调用了plus.camera的方法
- 为了方便调用，且与原来的组件保持一致，采用的方式是复制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的基本了解
标签：uniapp,调用,大坑,文件,base64,h5,camera,上传,图片 来源： https://blog.csdn.net/u010513497/article/details/116497658
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。