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

转载于 https://blog.youkuaiyun.com/u014452812/article/details/78082776

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

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

3 照片资源上传到服务(可以查看官方API  http://www.html5plus.org/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();
        }
    }