apicloud image upload

Image upload in the app, such as: personal information page, uploading avatar

use:

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

front-end code

<div class="img_box">
            <img class="imgPic" src="../../image/33.jpg"/>
            <a class="chooseImg" href="javascript:;" onclick="chooseImg();">点击上传</a>
            <p class = " lessen " >Tip: Click on image to re-upload</p>
        </div>

js data processing

apiready = function(){
        UIMediaScanner = api.require('UIMediaScanner');
    };
        // Upload photos 
        // Before using this module, you need to add a checkmark to access the album permission on the cloud compilation page, otherwise there will be a crash and flashback 
    var UIMediaScanner = null ;
     function chooseImg() {
        api.actionSheet({
            cancelTitle: 'Cancel' ,
            buttons: [ 'Take photo', 'Select from phone album' ]
        }, 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 : 'Select image' ,
                        cancelText : 'Cancel' ,
                        finishText : 'finish'
                    },
                    styles : {
                        bg : '#fff',   // resourcer background 
                        mark : {    // After the picture is selected, the check mark 
                            icon : '' ,
                            position : 'bottom_left',   // position 
                            size : 30    // size 
                        },
                        are not : {
                            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 image conversion Xu calls 
                        UIMediaScanner.transPath({
                             // path of the image 
                            path : ret.list[0 ].path
                        }, function (right, err) {
                             if (right) {
                                updateImg(ret.path);
                            } else {
                                $api.showToast( 'Image conversion error, please re-select' );
                            }
                        });
                    }
                });
            }
        });
    };

    // Upload image 
    function updateImg(path) {
        api.showProgress({
            title : ' ',
            text : 'Uploading...' ,
            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( 'Network exception, please try again later' );
                 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);
            }
        });
    };