zoukankan      html  css  js  c++  java
  • 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);
                }
            });
        };
        
  • 相关阅读:
    页面跳转
    vue项目流程
    前端框架发展史
    webpack构建react项目和发布流程
    React工作原理
    React项目中的registerServiceWorker作用?
    学习react总结
    浏览器的渲染:过程与原理
    浮动相关
    块级元素与内嵌元素
  • 原文地址:https://www.cnblogs.com/haonanZhang/p/9001968.html
Copyright © 2011-2022 走看看