本文给出在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里加入
相机图库
其中，popupVisible控制是否弹出，position控制弹出的位置，里面的具体内容放在一个div里了
至此，完成了选择相机还是图库的操作。
第五步：打包apk，安装到手机上进行测试
以上就是在用cordova的camera插件进行图片上传的时候遇到的问题及解决步骤。
[译]怎样在Vue.js中使用jquery插件
原文:http://gambardella.info//09/05/guide-how-to-use-vue-js-with-jquery-plugins 使用Vue真的太棒了,但是也有可能使 ...
Vue.js图片预览插件
vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault. ...
vue.js插件使用(02) vue-router
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
[译]基于Vue.js的10个最佳UI框架，用于构建移动应用程序
原文查看10 Best Vue.js based UI Frameworks for Building Mobile Apps 如果您期待使用Vue.js构建移动应用程序,那么您可以选择许多可用的UI ...
Vue.js——vue-router 60分钟快速入门
概述 vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的 ...
Vue.js——vue-resource全攻略
概述 上一篇我们介绍了如何将$.ajax和Vue.js结合在一起使用,并实现了一个简单的跨域CURD示例.Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的D ...
vue.js拓展篇(8):测试开发与调试
内容 第15章:测试开发与调试 任何实际项目的开发,除了功能性代码的完成,规范的开发流程和严谨的测试都是不可或缺的.合理使用工具将事半功倍. 1.ESLint ESLint是Lint语法检查工具,避免 ...
Vue.js——vue-resource
vue-resource是Vue.js的一款插件,它可以通过XMLHttpRequest或JSONP发起请求并处理响应. vue-resource使用 引入 npm install vue-reso ...
谈谈Vue.js——vue-resource全攻略
本篇文章主要介绍了谈谈Vue.js——vue-resource全攻略,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 概述 上一篇我们介绍了如何将$.ajax和Vue. ...
随机推荐
Android Studio安装插件GsonFormat
Android Studio菜单栏File > Settings > plugins' 这个是Android Studio搜索和安装插件的界面,下面直接上动图 : 安装结束后需要关闭重新启 ...
JNI相关知识
JNI(Java Native Interface,JAVA原生接口) 使用JNI可以使Java代码和其他语言写的代码(如C/C++代码)进行交互. 问:为什么要进行交互? |- 首先,Java语言 ...
年薪10w和年薪100w的人，差在哪里？
职场,为什么有人已经当上了董事总经理,而有的人还是资深销售经理? 出道,为什么有人已经当上了主编.出版人,而有的人还是资深编辑? 打拼,为什么有人已经身价数十亿美金,而有的人还在为竞 ...
HDU 5776 sum (前缀和)
题意:给定 n 个数,和 m,问你是不是存在连续的数和是m的倍数. 析:考虑前缀和,如果有两个前缀和取模m相等,那么就是相等的,一定要注意,如果取模为0,就是真的,不要忘记了,我当时就没记得.... ...
Oracle 游标Cursor 的基本用法
查询 SELECT语句用于从数据库中查询数据,当在PL/SQL中使用SELECT语句时,要与INTO子句一起使用,查询的 返回值被赋予INTO子句中的变量,变量的声明是在DELCARE中.SELECT ...
HealthKit开发教程Swift版：起步
原文:HealthKit Tutorial with Swift: Getting Started作者:Ernesto García 译者:Mr_cyz ) HealthKit是iOS 8中的新的A ...
TCP TIME WAIT
根据TCP协议定义的3次握手断开连接规定,发起socket主动关闭的一方 socket将进入TIME_WAIT状态,TIME_WAIT状态将持续2个MSL(Max Segment Lifetime) ...
HDOJ 1217 Arbitrage (最短路)
题意:每两种货币之间都有不同的汇率 如果换回自己最后是赚的 输出Yes 否则是No 因为最多只有三十种货币 所以用Floyd是可行的 与一般的最短路板子不同的地方 汇率是要乘而不是加 如果乘上一个小 ...
比较两个DataTable是否相等
/// /// 比较两个DataTable内容是否相等,先是比数量,数量相等就比内容 /// ...
