apicloud图片上传

app中的图片上传,例如:个人信息页面,上传头像

使用:

UIMediaScanner
地址:
https://docs.apicloud.com/Client-API/UI-Layout/UIMediaScanner

前端代码

<div class="img_box">
            <img class="imgPic" src="../../image/33.jpg"/>
            <a class="chooseImg" href="javascript:;" onclick="chooseImg();">点击上传</a>
            <p class="lessen">提示:点击图片以重新上传</p>
        </div>

js数据处理

apiready = function(){
        UIMediaScanner = api.require('UIMediaScanner');
    };
        //上传照片
        //使用本模块前需在云编译页面添加勾选访问相册权限,否则会有崩溃闪退现象
    var UIMediaScanner = null;
    function chooseImg() {
        api.actionSheet({
            cancelTitle: '取消',
            buttons: ['拍照', '从手机相册选择']
        }, function(ret, err) {
            var index = ret.buttonIndex;
            if (index == 1) {
                api.getPicture({
                    sourceType: 'camera',
                    encodingType: 'jpg',
                    mediaValue: 'pic',
                    destinationType: 'url',
                    quality: 40,
                    saveToPhotoAlbum: true
                }, function(ret, err) {
                    if (ret) {
                        updateImg(ret.data);
                    }
                });
            } else if (index == 2) {
                UIMediaScanner.open({
                    type : 'picture',
                    column : 4,
                    max : 1,
                    sort : {
                        key : 'time',
                        order : 'desc'
                    },
                    texts : {
                        stateText : '选择图片',
                        cancelText : '取消',
                        finishText : '完成'
                    },
                    styles : {
                        bg : '#fff',  //资源器背景
                        mark : {   //选中图片后的,对号
                            icon : '',
                            position : 'bottom_left',  //位置
                            size : 30   //大小
                        },
                        nav : {
                            bg : '#fff',
                            stateColor : '#56b7e1',
                            stateSize : 18,
                            cancelBg : 'rgba(0,0,0,0)',
                            cancelColor : '#56b7e1',
                            cancelSize : 15,
                            finishBg : 'rgba(0,0,0,0)',
                            finishColor : '#56b7e1',
                            finishSize : 15
                        }
                    },
                    exchange : true
                }, function(ret, err) {
                    if (ret) {
                        //transPath 图片 转换徐调用
                        UIMediaScanner.transPath({
                            //图片的路径
                            path : ret.list[0].path
                        }, function(ret, err) {
                            if (ret) {
                                updateImg(ret.path);
                            } else {
                                $api.showToast('图片转换出错,请重新选择');
                            }
                        });
                    }
                });
            }
        });
    };

    // 上传图片
    function updateImg(path) {
        api.showProgress({
            title : ' ',
            text : '正在上传...',
            modal : true
        });
        api.ajax({
            url : MainUrl + 'User&a=upload_img',
            method : 'post',
            timeout : 60,
            dataType : 'json',
            returnAll : false,
            data : {
                files : {
                    'images' : path
                }
            }
        }, function(data, err) {
            api.hideProgress();
            if (err) {
                $api.showToast('网络异常,请稍后重试');
                return;
            }
            
            if (data.status == 200) {
                $api.css($api.byId('show_img'), 'background: url(' + data.data + ') center no-repeat; background-size: cover;');
                $api.attr($api.byId('show_img'), 'data-img', data.data);
            } else {
                $api.showToast(data.info);
            }
        });
    };
    

猜你喜欢

转载自www.cnblogs.com/haonanZhang/p/9001968.html
今日推荐