请叫我六耳猕猴
请叫我六耳猕猴
  • 发布:2019-09-30 14:19
  • 更新:2020-12-15 15:07
  • 阅读:847

mui 上传照片 拍照 自带相册上传 不是多张上传的 是一个一个上传 然后 后面上传的图片就把前面的图片给覆盖了 发送给后台服务器也是最后的那个图片

分类:wap2app

var postImg = function(imgObj, type) {
console.log(type)
$('#'+imgObj).on('tap', function(event) {
if (mui.os.plus) {
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "上传照片",
cancel: "取消",
buttons: a
}, function (b) {
switch (b.index) {
case 0:
break;
case 1:
getImage();
break;
case 2:
galleryImg();
break;
default:
break
}
})
}

    });  
    var uploadHead = function(imgPath) {  
        var that=this;  
        var image = new Image();  
        image.src = imgPath;  
        image.onload = function() {  
            var imgData= getBase64Image(image);  
            if(type == 1) {  
                console.log('进来了')  
                document.getElementById(imgObj).innerHTML = '<div><img src="'+ imgData +'"/><span></span></div>';  
            }else {  
                document.getElementById(imgObj).src = imgData;  
                console.log(document.getElementById(imgObj).src)  
            }  
            removeImgs();  
        };  
    }  
    var getBase64Image = function (img) {  
        var canvas = document.createElement("canvas");  
        var width = img.width;  
        var height = img.height;  
        // calculate the width and height, constraining the proportions  
        if (width > height) {  
            if (width > 750) {  
                height = Math.round(height *= 750 / width);  
                width = 750;  
            }  
        } else {  
            if (height > 750) {  
                width = Math.round(width *= 750 / height);  
                height = 750;  
            }  
        }  
        canvas.width = width;   /*设置新的图片的宽度*/  
        canvas.height = height; /*设置新的图片的长度*/  
        var ctx = canvas.getContext("2d");  
        ctx.drawImage(img, 0, 0, width, height); /*绘图*/  
        var dataURL = canvas.toDataURL("image/jpeg", 0.7);  
        return dataURL;  
    }  
    var getImage = function () {  
        var that=this;  
        var c = plus.camera.getCamera();  
        c.captureImage(function (e) {  
            plus.io.resolveLocalFileSystemURL(e, function (entry) {  
                var s = entry.toLocalURL() + "?version=" + new Date().getTime();  
                uploadHead(s);  
            }, function (e) {  
                console.log("读取拍照文件错误:" + e.message);  
            });  
        }, function (s) {  
            console.log("error" + s);  
        }, {  
            filename: "_doc/head.jpg"  
        })  
    }  
    var galleryImg = function () {  
        var that=this;  
        plus.gallery.pick(function(a) {  
            plus.io.resolveLocalFileSystemURL(a, function(entry) {  
            plus.io.resolveLocalFileSystemURL("_doc/", function(root) {  
                console.log("已存在")  
                    root.getFile("head.jpg", {}, function(file) {  
                        //文件已存在  
                        file.remove(function() {  
                            console.log("file remove success");  
                            entry.copyTo(root, 'head.jpg', function(e) {  
                                    var e = e.fullPath + "?version=" + new Date().getTime();  
                                    console.log(e)  
                                    uploadHead(e);  
                                },  
                                function(e) {  
                                    console.log('copy image fail:' + e.message);  
                                });  
                        }, function() {  
                            console.log("delete image fail:" + e.message);  
                        });  
                    }, function() {  
                        //文件不存在  
                        console.log("不存在")  
                        entry.copyTo(root, 'head.jpg', function(e) {  
                                var path = e.fullPath + "?version=" + new Date().getTime();  
                                uploadHead(path);  
//                                        document.querySelector("#__mui-imageview__group .mui-slider-item img").src = path;  
                            },  
                            function(e) {  
                                console.log('copy image fail:' + e.message);  
                            });  
                    });  
                }, function(e) {  
                    console.log("get _www folder fail");  
                })  
            }, function(e) {  
                console.log("读取拍照文件错误:" + e.message);  
            });  
        }, function(a) {}, {  
            filter: "image"  
        })  
    }  
}  
postImg('head-img',0);  
postImg('avatarimg',0);  
postImg('zhanshi1',1);  
postImg('zhanshi2',1);  
postImg('zhanshi3',1);  
mui(document).on('tap','#head-img',function(){  
    console.log(55555)  
    postImg('head-img',0);  
})  
var removeImgs = function() {  
    $('#center-ziliao-ul span').on('tap', function(event) {  
        $(this).parent().remove();  
        $(this).parent().parent().off();  
        return false;  

    });  
}  

var getuserinfo = function() {  
    mui.getJSON(H_SRC + '/api.php/User/userInfo', {token: token}, function(res) {  
        if(res.code == 200) {  
            var userinfo = res.data;  
            console.log(userinfo.img_head)  
            if(userinfo.img_head) {  
                $('#avatarimg').attr('src', userinfo.img_head)  
            }else {  
                $('#avatarimg').attr('src', 'img/set_default.png')  
            }  
            $('#rel_name').val(userinfo.real_name);  
            $('#nickname').val(userinfo.username);  
            if(userinfo.sex == 1) $('.boy-btn').addClass('check-on');  
            else $('.girl-btn').addClass('check-on');  
            if(userinfo.show_img1 != "" && userinfo.show_img1 != null && userinfo.show_img1 != "undefined") {  
                $('#center-ziliao-ul li').eq(0).html('<div><img src="'+userinfo.show_img1+'"/><span></span></div>');  
            }else {  
                $('#center-ziliao-ul li').eq(0).html('');  
            }  
            if(userinfo.show_img2 != "" && userinfo.show_img2 != null && userinfo.show_img2 != "undefined") {  
                $('#center-ziliao-ul li').eq(1).html('<div><img src="'+userinfo.show_img2+'"/><span></span></div>')  
            }else {  
                $('#center-ziliao-ul li').eq(1).html('')  
            }  
            if(userinfo.show_img3 != "" && userinfo.show_img3 != null && userinfo.show_img3 != "undefined") {  
                 $('#center-ziliao-ul li').eq(2).html('<div><img src="'+userinfo.show_img3+'"/><span></span></div>')  
            }else {  
                 $('#center-ziliao-ul li').eq(2).html('')  
            }  
            $('#s_id').val(userinfo.s_id);  
            $('#s_speciality').val(userinfo.s_speciality);  
            $('#s_grade').val(userinfo.s_grade);  
            if(userinfo.s_img && userinfo.s_img!="") {  
                $('#head-img').attr('src', userinfo.s_img);  
            }else {  
                $('#head-img').attr('src', 'img/student-bg.jpg');  
            }  
            $('#s_like').val(userinfo.s_like);  
            $('#s_strength').val(userinfo.s_strength);  

            if(userinfo.is_examine == '1') {  
                $('#head-img').off();  
            }  

            removeImgs();  
        }else {  
            mui.toast(res.msg)  
        }  
    })  
}  
console.log(token)  

// getuserinfo();
var checkBase64 = function(str) {
console.log(str)
if(str) {
var str = str.replace(/\s*/g,"");
if(str.indexOf('data:image') == -1 && str.indexOf('jpeg;base64') == -1) {
return 'no';
}else {
return str;
}
}else {
return 'delete';
}
}

2019-09-30 14:19 负责人:无 分享
已邀请:
请叫我六耳猕猴

请叫我六耳猕猴 (作者)

明明分开的啊 为什么发送给服务器的图片就全部成最后一次上传的图片了

3***@qq.com

3***@qq.com - 哎......

兄弟 解决了没 你这个问题 我也遇到这种情况了! 解决了 回复我下 是怎么解决的呗

该问题目前已经被锁定, 无法添加新回复