MUI 拍照和从系统相册选择图片上传

要完成用MUI 拍照和从系统相册选择图片上传的功能，可以理解成有三个功能

1 调用手机相机的功能(可以查看官方API /doc/zh_cn/camera.html)

2 调用系统相册的功能(可以查看官方API/doc/zh_cn/gallery.html)

3 照片资源上传到服务(可以查看官方API/doc/zh_cn/uploader.html)

下面是我的使用例子，

一， 调用 打开系统选择框按钮

document.getElementById('headImage').addEventListener('tap', function() {if (mui.os.plus) {var buttonTit = [{title: "拍照"}, {title: "从手机相册选择"}];plus.nativeUI.actionSheet({title: "上传图片",cancel: "取消",buttons: buttonTit}, function(b) { /*actionSheet 按钮点击事件*/switch (b.index) {case 0:break;case 1:getImage(); /*拍照*/break;case 2:galleryImg();/*打开相册*/break;default:break;}})} }, false);

二， 打开相机功能，拿到照片的路径

// 拍照获取图片function getImage() {var c = plus.camera.getCamera();c.captureImage(function(e) {plus.io.resolveLocalFileSystemURL(e, function(entry) {var imgSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到图片路径// 其他操作,比如预览展示}, function(e) {console.log("读取拍照文件错误：" + e.message);});}, function(s) {console.log("error" + s);}, {filename: "_doc/camera/"})}

三， 打开手机相册

// 从相册中选择图片 function galleryImg(){// 从相册中选择图片plus.gallery.pick( function(e){for(var i in e.files){var fileSrc = e.files[i];// 其他操作,比如预览展示}}, function ( e ) {console.log( "取消选择图片" );},{filter: "image",multiple: true,maximum: 5,system: false,onmaxed: function() {plus.nativeUI.alert('最多只能选择5张图片');}});}

四， 上传到服务器

// 上传的方法function upload(){MicroTaskGUID = common.guid();var rul = "服务器地址"var imgsArr = mui(".task-img"); // 要上传的 img 标签mui.each(imgsArr, function(index, item){// console.log(index)// console.log(item.src)createUp(item)})function createUp (files) {var task = plus.uploader.createUpload(url,{method:"POST"},function(t,status){ //上传完成if(status==200){console.log("上传成功："+t.responseText);}else{console.log("上传失败："+status);}});//添加其他参数// task.addData("name","test");// 页面中要上传的 图片路径task.addFile(files.src,{key:files.src});task.start();}}