mui-app 拍照、視頻、圖片選擇，自動上傳

實現效果

 

實現步驟

1.html結構

　　　　　　　　　　<div class="upload">
                　　 <p class="upload_title">圖片 </p>
                    <div class="upload_r">
                        <a class="mui-icon-right-nav mui-pull-right a1">
                            <span id="selectImage" style="font-size: 30px;" class="mui-icon mui-icon-camera"></span>
                        </a>
                    </div>
                </div>
                <div class="img_content">
                    <ul id="imgs" class="mui-table-view mui-grid-view">
                        <!-- <li class="mui-table-view-cell mui-media mui-col-xs-6">
                            <a href="#">
                                <img class="mui-media-object" src="../images/cbd.jpg">
                                <span class="mui-icon mui-icon-trash deleteBtn"></span>
                            </a>
                        </li> -->
                    </ul>
                </div>
                <div class="video_content" id="videos">
                    <!-- <video id="video" width="480" height="320" src="../images/test.mp4" controls> -->
                </div>

2.拉出手機選擇拍照、拍攝視頻、從手機相冊選擇

document.getElementById('selectImage').addEventListener('tap', function() {
    if (mui.os.plus) {
        var a = [{
                title: "拍照"
            },
            {
                title: "拍攝視頻"
            },
            {
                title: "從手機相冊選擇"
            }
        ];
        plus.nativeUI.actionSheet({
            title: "異常上傳",
            cancel: "取消",
            buttons: a
        }, function(b) { /*actionSheet 按鈕點擊事件*/
            switch (b.index) {
                case 0:
                    break;
                case 1:
                    getImage(); /*拍照*/
                    break;
                case 3:
                    galleryImg(); /*打開相冊*/
                    break;
                case 2:
                    galleryVideo(); /*視頻*/
                    break;
                default:
                    break;
            }
        })
    }
}, false);

3.拍照獲取圖片

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(); //拿到圖片路徑  
            upLoadFile(imgSrc, 'image');
            setHtml(imgSrc);
        }, function(e) {
            console.log("讀取拍照文件錯誤：" + e.message);
        });
    }, function(s) {
        console.log("error" + s.message);
    }, {
        filename: "_doc/camera/"
    })
}

4.拍攝視頻

function galleryVideo() {
    var cam = plus.camera.getCamera();
    cam.startVideoCapture(function(t) {
        plus.io.resolveLocalFileSystemURL(t, function(entry) {
            var videoSrc = entry.toLocalURL() + "?version=" + new Date().getTime(); //拿到圖片路徑  
            // console.log(videoSrc)
            setHtmlVideo(videoSrc);
            upLoadFile(videoSrc, 'video');
        }, function(e) {
            console.log("讀取拍照文件錯誤：" + e.message);
        });
    }, function(e) {

    }, {
        filename: '_downloads/video/', //錄像文件保存的路徑
        format: cam.supportedVideoFormats[0], //攝像的文件格式
        index: 1, //攝像默認使用的攝像頭
        videoMaximumDuration: 10, //視頻長度
        resolution: cam.supportedVideoResolutions[0], //攝像使用的分辨率
        popover: { //攝像界面彈出指定區域
            top: "10px",
            left: "10px",
            width: "200px",
            height: "200px"
        }
    })
}

5.從相冊中選擇圖片

function galleryImg() {
    plus.gallery.pick(function(e) {
        for (var i in e.files) {
            var fileSrc = e.files[i];
            upLoadFile(fileSrc, 'image');
            setHtml(fileSrc);
        }
    }, function(e) {
        console.log("取消選擇圖片");
    }, {
        filter: "image",
        multiple: true,
        maximum: 4,
        system: false,
        onmaxed: function() {
            plus.nativeUI.alert('最多只能選擇4張圖片');
        }
    });
}

6.回顯圖片和視頻

function setHtml(path) {
    var str = '';
    str = '<li class="mui-table-view-cell mui-media mui-col-xs-6">' +
        '<img class="mui-media-object" src="' + path + '">' +
        '</li>';
    $("#imgs").append(str);
}


function setHtmlVideo(path) {
    var str = '';
    str = '<video width="350" height="350" src="' + path + '" controls>';
    $("#videos").append(str);
}

7.自動上傳文件

var fileData = [];
var i = 0;
function upLoadFile(fileSrc, type) {
    i++;
    var wt = plus.nativeUI.showWaiting();
    var upload_api = baseUrl + '/dfs/mongodb/file/upload'
    var task = plus.uploader.createUpload(upload_api, {
            method: "POST"
        },
        function(t, status) { //上傳成功服務器返回文件對象
            if (status == 200) {
                // mui.alert("上傳成功！" + t.responseText);
                var objData = JSON.parse(t.responseText)
                var obj = [{
                    type: type,
                    uid: objData[0].id,
                    name: objData[0].name ? objData[0].name : 'uploadFile' + i,
                    url: objData[0].path,
                    size: objData[0].size,
                    duartion: 0,
                    status: 'done'
                }];
                fileData = fileData.concat(obj);
                wt.close(); //關閉等待提示按鈕
            } else {
                mui.alert("上傳失敗：" + status);
                wt.close(); //關閉等待提示按鈕
            }
        }
    );
    task.setRequestHeader('token', localStorage.getItem('access_token'));
    task.addData("sysChannel", '');
    task.addData("applyId", '');
    task.addFile(fileSrc, {
        key: "file"
    });
    task.start();
}

最后組裝的fileData是所有上傳的文件的對象數組

8. 奧里給，功能到此就實現了！