前端开发笔记

MUI+Hbuilder之多图片,单图片上传(五)

2018-12-17  本文已影响0人  喵呜Yuri

按钮

<div class="img-item btn" id="uploadImg"></div>

js:

document.getElementById("uploadImg").addEventListener("tap", function() {
                var editButtons = new Array();
                if(vm.uploadImgArr.length < 9) {
                    editButtons.push({
                        title: "拍照上传",
                        style: "default"
                    });
                    editButtons.push({
                        title: "从相册选择",
                        style: "default"
                    });
                    plus.nativeUI.actionSheet({
                        cancel: "取消",
                        buttons: editButtons
                    }, function(e) {
                        var index = e.index;
                        switch(index) {
                            case 1:
                                captureImage(); //拍照
                                break;
                            case 2:
                                selectImage(); //相册选择
                                break;
                        }
                    });
            
                }else{
                    mui.toast("最多选择九张图片");
                }

                });

            //选择图片
            function selectImage() {
                plus.gallery.pick(function(path) {
                    loadImage(path);
                }, function(e) {
                    mui.toast("没有选择图片");
                },{
                    filter:'image',
                    multiple: true,
                    system: false
                });
            }
            //确定选择图片
            function loadImage(path) {
                          console.log(path);//多图片数组{"files":["file:///storage/emulated/0/Huawei/MagazineUnlock/magazine-unlock-01-2.3.1197-_235C89AFABD8044D447E369EA1CBD603.jpg","file:///storage/emulated/0/Huawei/MagazineUnlock/magazine-unlock-01-2.3.1197-_B6EE3C9D1FC9834884A25F0C070D43F1.jpg"]} at view/faultrepair/setfaultrepair.html:198

                ...
            }

主要方法在 selectImage()和 loadImage(path)里面
单图片上传:

    function selectImage() {
                plus.gallery.pick(function(path) {
                    loadImage(path);
                }, function(e) {
                    mui.toast("没有选择图片");
                });
            }
            //确定选择图片
            function loadImage(path) {
                           console.log(path);//单个图片路径"file:///storage/emulated/0/Huawei/MagazineUnlock/magazine-unlock-01-2.3.1197-_235C89AFABD8044D447E369EA1CBD603.jpg"
            ...
            }
上一篇 下一篇

猜你喜欢

热点阅读