apicloud实现修改头像功能

最新推荐文章于 2021-09-10 15:11:37 发布

fangdong88

最新推荐文章于 2021-09-10 15:11:37 发布

阅读量2.2k

点赞数 1

分类专栏：前端文章标签： apicloud

本文链接：https://blog.csdn.net/fangdong88/article/details/77810867

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

示例代码：

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>user center</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link href="../../css/style.css" rel="stylesheet">
    <style>

    </style>
</head>

<body>

    <!--顶部-->
    <div class="users_top">
        <div class="my_niname">
            <dd><img src="../../images/avatar.png" id="avatar" tapmode οnclick="showAction();"></dd>
            <dd id="nick_name">正在读取..</dd>
        </div>
    </div>
    <!--内容-->
    <div class="user_content">
        <ul class="panel_list_all">
            <li class="user_list_lev">会员等级：<span id="user_level">正在读取..</span></li>
            <li class="user_list_name">用户名 <span class="right" id="user_name">正在读取..</span></li>
            <li class="user_list_pwd" tapmode id="update-pwd">修改密码 <span class="right">修改登录密码 <icon class="glyphicon glyphicon-menu-right"></icon></span></li>
        </ul>
            <input type="button" class="orange_in_btn" value="注销" tapmode id="logout" />
        </div>
    </div>


</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript">
    apiready = function() {
        $api.byId('update-pwd').onclick = function() {
            api.openWin({
                name: 'update-pwd',
                url: './update-pwd.html',
            });
        };
    }

    //修改头像
    function showAction() {
        api.actionSheet({
            title: '上传头像',
            cancelTitle: '取消',
            buttons: ['拍照', '从手机相册选择']
        }, function(ret, err) {
            if (ret) {
                getPicture(ret.buttonIndex);
            }
        });
    }

    function getPicture(sourceType) {
        if (sourceType == 1) { // 拍照
            //获取一张图片
            api.getPicture({
                sourceType: 'camera',
                encodingType: 'png',
                mediaValue: 'pic',
                allowEdit: false,
                quality: 90,
                saveToPhotoAlbum: true
            }, function(ret, err) {
                // 获取拍照数据并处理
                if (ret) {
                    var imgSrc = ret.data;
                    if (imgSrc != "") {
                        var ele = $api.dom('#avatar');
                        $api.attr(ele, 'src', imgSrc);
                    }
                }
            });
        } else if (sourceType == 2) { // 从相机中选择
            //UIMediaScanner 是一个多媒体扫描器，可扫描系统的图片、视频等多媒体资源
            var obj = api.require('UIMediaScanner');
            obj.open({
                //返回的资源种类,picture（图片）,video（视频）,all（图片和视频）
                type: 'picture',
                //（可选项）图片显示的列数，须大于1
                column: 4,
                max: 1,
                //（可选项）图片排序方式,asc（旧->新）,desc（新->旧）
                sort: {
                    key: 'time',
                    order: 'desc'
                },
                //（可选项）模块各部分的文字内容
                texts: {
                    stateText: '已选择*项',
                    cancelText: '取消',
                    finishText: '完成'
                },
                styles: {
                    bg: '#fff',
                    mark: {
                        icon: '',
                        position: 'bottom_right',
                        size: 20
                    },
                    nav: {
                        bg: '#eee',
                        stateColor: '#000',
                        stateSize: 18,
                        cancleBg: 'rgba(0,0,0,0)',
                        cancelColor: '#000',
                        cancelSize: 18,
                        finishBg: 'rgba(0,0,0,0)',
                        finishColor: '#000',
                        finishSize: 18
                    }
                }
            }, function(ret) {
                // 获取图片数据并处理
                if (ret) {
                    if (ret.hasOwnProperty("list")) {
                        var ele = $api.dom('#avatar');
                        var localAvaterPath = ret.list[0].path;
                        //$api.attr(ele, 'src', ret.list[0].path);
                        api.showProgress({
                            title: '正在上传...',
                            modal: true
                        });
                        api.ajax({
                            url: 'http://192.168.0.105:3012/Api/User/updateAvatar',
                            method: 'post',
                            data: {
                                files: {
                                    'img': ret.list[0].path
                                }
                            }
                        }, function(ret, err) {
                            if (ret) {
                                if (ret.code == 200) {
                                    //$api.attr(ele, 'src', ret.data);
                                    $api.attr(ele, 'src', localAvaterPath);
                                    api.hideProgress();

                                } else {
                                    api.hideProgress();
                                    api.toast({
                                        msg: ret.msg,
                                        location: 'middle'
                                    });
                                }
                            } else {
                                api.hideProgress();
                                api.toast({
                                    msg: err.msg,
                                    location: 'middle'
                                });
                            }
                        });
                    }
                }
            });
        }
    }
</script>

</html>