croppers的formdata上传不成功原因及解决办法

原因：格式问题
解决方法：将blob改成data64上传，前端还是用blob渲染

原代码

if(event === 'confirmSave'){
// -----------------修改部分-------------------//
                    image.cropper("getCroppedCanvas",{
                        width: saveW,
                        height: saveH
                    }).toBlob(function(blob){
// -----------------修改部分-------------------//
                        // 假添加
                        var newImg = document.createElement("img"),
                        imgUrl = URL.createObjectURL(blob);
                        newImg.onload = function() {
                            URL.revokeObjectURL(imgUrl); // 激活
                        };
                        newImg.src = imgUrl;
                        newImg.classList.add("layui-upload-img");
                        console.log(111,newImg)
                        $(".tbgl-wdtb-div").append('<div class="tbgl_mrtb_tpbox" onclick="choose(this)">'+ newImg.outerHTML +'</div>');
                        // 数据上传
// -----------------修改部分-------------------//
                        var formData=new FormData();
                        formData.append('file',blob); // TODO
// -----------------修改部分-------------------//
                        console.log('点击保存',blob,formData)
                        debugger;
                        $.ajax({
                            method:"post",
                            url: url, //用于文件上传的服务器端请求地址   这个不用改
                            data: formData,
                            processData: false,
                            contentType: false,
                            success:function(result){
                                console.log("上传成功回调",result)
                                if(result.code == 200){
                                    layer.msg(result.msg,{icon: 1});
                                    layer.closeAll('page');
                                    return done(result.name);
                                    // 前端渲染  可能需要  插件后台
                                    // $(".tbgl-wdtb-div").append('<div class="tbgl_mrtb_tpbox" onclick="choose(this)">测试<img src="' + result + '" alt="' + result.name + '" class="layui-upload-img"></div>')
                                }else if(result.code == -1){
                                    layer.alert(result.msg,{icon: 2});
                                }
                            }
                        });
                    });
 }

修改后代码

if(event === 'confirmSave'){
// -----------------修改部分-------------------//                    
                    var result= image.cropper("getCroppedCanvas",{
                        width: saveW,
                        height: saveH
                    });

                    var urlss=result.toDataURL().substring(22);
                                        
                    result.toBlob(function(blob){
// -----------------修改部分-------------------//
                        //假添加 
                        var newImg = document.createElement("img"),
                        newimgurl = URL.createObjectURL(blob); 
                        newImg.onload = function() {
                            URL.revokeObjectURL(newimgurl); // 激活
                        };
                        newImg.src = newimgurl;
                        newImg.classList.add("layui-upload-img");
                        console.log(111,newImg)
                        $(".tbgl-wdtb-div").append('<div class="tbgl_mrtb_tpbox" onclick="choose(this)">'+ newImg.outerHTML +'</div>');
                        //数据上传 
// -----------------修改部分-------------------//          
                        var formData=new FormData();  
                         formData.append('data64',urlss); 
// -----------------修改部分-------------------//
                        $.ajax({
                            method:"post",
                            url: url, //用于文件上传的服务器端请求地址   这个不用改
                            data: formData,
                            processData: false,
                            contentType: false,
                            success:function(result){ 
                                console.log("上传成功回调",result)
                                if(result.code == 200){ 
                                    //layer.closeAll('page');
                                    layer.closeAll();
                                    //layer.msg(result.msg,{icon: 1});
                                    return done(result.name);
                                    // 前端渲染  可能需要  插件后台
                                    // $(".tbgl-wdtb-div").append('<div class="tbgl_mrtb_tpbox" onclick="choose(this)">测试<img src="' + result + '" alt="' + result.name + '" class="layui-upload-img"></div>')
                                }else if(result.code == -1){
                                    layer.alert(result.msg,{icon: 2});
                                }
                            }
                        });
                    });
}