Vue.js 使用cordova camera插件调取相机
2023-09-11 14:15:30 时间
本文给出在vue.js里如何使用cordova的插件完成调取相机及图库,并完成图片上传的操作。
具体的操作步骤如下
第一步:在cordova项目下安装cordova-plugin-camera插件
cordova plugin add cordova-plugin-camera
第二步:在需要调取相机的地方,加入相关的代码
cameraTakePicture: function (mySourceType) { navigator.camera.getPicture(this.onSuccess, this.onFail, { quality: 50, destinationType: Camera.DestinationType.DATA_URL, encodingType: Camera.EncodingType.JPEG, sourceType: mySourceType }) },
注意的问题:
1、sourceType:
PHOTOLIBRARY 或 0 打开照片库。 CAMERA 或 1 打开本机相机。 SAVEDPHOTOALBUM 或 2 打开已保存的相册。
2、destinationType
DATA_URL 或 0 返回base64编码字符串。 FILE_URI 或 1 返回图片文件URI。 NATIVE_URI 或 2 返回图片本机URI。
第三步:在上步完成图片拍摄之后,图片上传
由于后台采用的是阿里云的追加上传,接收的参数类型为File,因此,在上步得到的base64图片需要转换为File,
dataURLtoFile: function (dataurl, filename) { var arr = dataurl.split(',') var mime = arr[0].match(/:(.*?);/)[1] var bstr = window.atob(arr[1]) var n = bstr.length var u8arr = new Uint8Array(n) while (n--) { u8arr[n] = bstr.charCodeAt(n) } var blob = new Blob([u8arr], {type: mime}) blob.lastModifiedDate = new Date() blob.name = filename return blob }
调用的方法如下
var file = this.dataURLtoFile('data:image/jpeg;base64,' + imageURI, 'test.jpeg')
imageURI是onSuccess函数的参数
至此,上传图片已经可以采用阿里云的追加上传完成了,具体的代码不附了
第四步:使用mintUI的popup完成点击弹出选择相机还是图库打开
首先,import {Popup} from 'mint-ui'
然后在components里加入Popup
最后在html里加入
<mt-popup v-model="popupVisible" position="bottom" style="width: 100%;"> <div> <div class='popup-item' @click='TakePictureType(1)'>相机</div> <div class='popup-item' @click='TakePictureType(2)'>图库</div> </div> </mt-popup>
其中,popupVisible控制是否弹出,position控制弹出的位置,里面的具体内容放在一个div里了
至此,完成了选择相机还是图库的操作。
第五步:打包apk,安装到手机上进行测试
以上就是在用cordova的camera插件进行图片上传的时候遇到的问题及解决步骤。
相关文章
- vue - config(index.js)
- vue.js入门学习
- vue 自定义指令(directive)实例
- Vue - 实现用 JS 调用自定义组件 / 类似 ElementUI 弹框组件(在 js 文件中通过 this.xxx 方式调用并显示自定义弹框模态框组件)
- 关于Vue中main.js,App.vue,index.html之间关系进行总结
- JS教程之Electron.js设计强大的多平台桌面应用程序的好工具
- vue.js格式使用vant-页面引入3
- vue.js格式使用vant-页面引入2
- vue-awesome-swiper 插件
- 【Vue】vue组件和vue插件的创建和使用(底部栏组件、Toast 和 Notify通知插件)
- Vue 之 插件 轮播组件 vue-awesome-swiper 的简单使用整理
- 解决:Vue调试工具vue-devtools安装方法——解决下载速度缓慢,安装报错问题
- Vue.js系列之三模板语法
- vue 中的slot属性(插槽)的使用
- 我们为什么以及是如何从 Angular.js 迁移到 Vue.js?
- vue 实现表格循环滚动 vue-seamless-scroll插件的安装与使用