h5图片压缩上传的问题

Question

移动端图片压缩上传的问题

在pc浏览器上模拟手机环境没有问题，在真机测试就不行;

相关代码

    <section class="g-flexview step2">
        <header class="m-navbar fcx-navbar">
            <a href="{:U('/Home/Usercenter/step1')}&uid={$authenticate_uid}" class="navbar-item">
                <i class="back-ico"></i>
            </a>
            <div class="navbar-center">
                <span class="navbar-title">上传资料</span>
            </div>
        </header>
        <div class="g-scrollview">
            <!-- setpbox -->
            <div class="setpbox">
                <ol class="ui-step ui-step-blue ui-step-4">
                    <li class="step-start step-done">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">1</span>
                            <span class="ui-step-cont-text"></span>
                        </div>
                    </li>
                    <li class="step-done">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">2</span>
                            <span class="ui-step-cont-text"></span>
                        </div>
                    </li>
                    <li class="">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">3</span>
                            <span class="ui-step-cont-text"></span>
                        </div>
                    </li>
                    <li class="step-end">
                        <div class="ui-step-line"></div>
                        <div class="ui-step-cont">
                            <span class="ui-step-cont-number">4</span>
                            <span class="ui-step-cont-text"></span>
                        </div>
                    </li>
                </ol>
            </div>
            <!-- /setpbox -->
            <form id="autheform" action="{:U('/Home/Usercenter/step2')}" method="post" enctype="multipart/form-data">
                <input type="hidden" name="authenticate_name" value="{$authenticate_name}">
                <input type="hidden" name="authenticate_sfz" value="{$authenticate_sfz}">
                <input type="hidden" name="authenticate_uid" value="{$authenticate_uid}">

                <div class="upbox" id="fbtn">
                    <div class="bg" style="background-image: url('__WAPIMG__exam/regagent/u1196.png')">
                        <input type="file" name="fimg" class="yasuo" error-msg="请上传身份证正面照" accept="image/jpeg" onchange="fimgclick(this);">
                    </div>
                    <p class="text-center">上传身份证正面照</p>
                </div>

                <div class="upbox" id="rbtn">
                    <div class="bg" style="background-image: url('__WAPIMG__exam/regagent/u1206.png')">
                        <input type="file" name="rimg" class="yasuo" error-msg="请上传身份证反面照" accept="image/jpeg" onchange="fimgclick(this);">
                    </div>
                    <p class="text-center">上传身份证反面照</p>
                </div>

                <div class="upbox" id="pbtn">
                    <div class="bg" style="background-image: url('__WAPIMG__exam/regagent/u1214.png')">
                        <input type="file" name="pimg" class="yasuo" error-msg="请上传执业证头像" accept="image/jpeg" onchange="fimgclick(this);">
                    </div>
                    <p class="text-center">执业证头像（请上传免冠、清晰头像照片）</p>
                </div>

                <div class="pd20">
                    <button id="mysubmit" type="button" class="btn-block fcx-btn">下一步</button>
                </div>
            </form>
        </div>
    </section>

    <script src="__WAPJS__exam/jquery.2.1.4.min.js"></script>
    <script src="__WAPJS__exam/ydui.js"></script>
    <script src="__WAPJS__lib/layer/layer.js"></script>
    <script src="__WAPJS__lib/localResizeIMG/lrz.bundle.js"></script>
    // 这里引用了 localResizeIMG 插件
    <script>
    var imgdata = {
            fimg: {
                "datas": "",
                "type": "",
                "name": ""
            },
            rimg: {
                "datas": "",
                "type": "",
                "name": ""
            },
            pimg: {
                "datas": "",
                "type": "",
                "name": ""
            }
        };
       // 这段代码是 localResizeIMG 
        function fimgclick(obj){
            var _tFile = obj.files[0],
                _tName = $(obj).attr('name'),
                imgarr = _tFile.name.toLowerCase().split('.'),
                imgtype = imgarr.pop(),
                imgname = imgarr.join("");
                lrz(_tFile)
                .then(function(res){
                    imgdata[_tName]['data'] = res.base64;
                    imgdata[_tName]['type'] = imgtype;
                    imgdata[_tName]['name'] = imgname;
                    $(obj).parent('.bg').css('background-image','url('+res.base64+')')
                }).catch(function(err){
                    dialog.toast(err, 'none', 2000);
                })
        }
        $('#mysubmit').click(function(){
                var _self = $(this)
                var errmsg = "", errorobj = "", objname = "", flag = false;
                formData = new FormData($("#autheform")[0]);

                $('.yasuo').each(function(){
                    objname = $(this).attr("name");
                    if(imgdata[objname]['name'] == ''){
                        errmsg = $('input[name='+objname+']').attr('error-msg');
                        dialog.toast(errmsg,'none',2000);
                        return flag = false
                    }else{
                        formData.set(objname,imgdata[objname]['data'],imgdata[objname]['name']+'.'+imgdata[objname]['type']);
                        return flag = true
                    }
                });

                if(flag){
                    _self.attr('disabled',true).removeClass('fcx-btn').addClass('btn-disabled')  
                    $.ajax({
                        url: "{:U('step2')}",
                        type: 'POST',
                        data: formData,
                        contentType: false,
                        processData: false,
                        beforeSend:function(){
                            dialog.loading.open();
                        },
                        complete:function(){
                            dialog.loading.close();
                        },
                        success: function (data) {
                            if (data.result) {
                                //window.location = "{:U('Usercenter/step3')}&id="+data.id;
                            }else{
                                _self.attr('disabled',false).removeClass('btn-disabled').addClass('fcx-btn');
                            }
                            return true;
                        },
                        error: function (XMLHttpRequest, textStatus, errorThrown) {
                            dialog.toast('网络错误', 'none', 3000);
                        }
                    });
                }             
            })
        });
        </script>

另外:

    formData.set(objname,imgdata[objname]['data'],imgdata[objname]['name']+'.'+imgdata[objname]    ['type']);
    // 这段代码如果用.set() 数据就提交不上去，用formData.append()就可以提交上去。不知道为什么 。。。。。。。。
   

最后一行一行代码的检查，发现问题出在$('.yasuo').each(function(){}) 里面，但实在是不知道怎么办，真机测试不出来。。。

Answer 1

FormDataset不行，append就行（看你的描述，可能问题在这里）
上传之前可以先打印下这2个最终获取的FormData是不是一样；
还可能与兼容性有关，set没有append兼容性好，可以直接把最终要上传的数据都新建 new FormData() 再append 进去，提交这个新建的FormData

Answer 2

formdata ios会炸的，踩过坑提醒一下

Answer 3

图片压缩应该服务器处理的