photoclip进行图片裁剪上传

1.前端html内容如下：

 



 
    
    
    
    
    


    
     
    



    

        

            

                

                    

                        
                            
                        
                    
                    

                
                

                    

                    

                        

                            
                            
                        
                        保存头像
                    
                    

                
            


            

                
昵称：
                

                    
                
            
            

                
性别：
                

                    

                        

                        
{{i.name}}
                    
                
            
        
        

        
        
保存


    

2.ajax调用

 //提交
        submit(){
            this.isdisabledFn = true;
            const fromData = new FormData()
            // fromData.append('file', $('#file')[0].files[0]);
            fromData.append('code',this.code)
            fromData.append('nickname',this.name)
            fromData.append('sex',this.sexLists[this.selectSexIndex].value)
            fromData.append('dataUrl',localStorage.getItem('dataUrl'))
            $.ajax({
                type:'POST',
                url:'http://×××××××××××.com/api/userinfo/updateUserInfo',
                processData: false,
                contentType: false,
                data: fromData,
                success:function(re){
                    const data = JSON.parse(re);
                    if (data.success == 0){

                        localStorage.setItem('nickname',data.data.nickname);
                        localStorage.setItem('sex',data.data.sex);
                       const nickname = localStorage.getItem('nickname');
                       const  sex= localStorage.getItem('sex');
                       const  imgurl= data.data.imgurl;
                       console.log(imgurl)       
                    }
                    if (data.success == 1){
                        $('.message').html('保存失败');
                    }

                }
            })
        }

3.接口编写

//修改昵称、头像上传等
    public function updateUserInfo(){
        $res = [];
        $code = trim($this->param['code']);
        $userid = $this->idbycode($code);
        $user = new Us();
        $this->param['userid'] = $userid;
        if($this->param['dataUrl']){
            $base64_dataUrl = $this->param['dataUrl'];
            $path = base64_image_content($base64_dataUrl,'uploads');  //将base64编码字符串文件转图片，并保存到服务器上
            $imgurl = 'http://'.$_SERVER['HTTP_HOST'].$path;
            $this->param['photo'] = $imgurl;
            $res['imgurl']  = $imgurl;
        }
        if($this->param['nickname'] == '请输入昵称') $this->getBackTo('未填写昵称',1);
        $data =  $user->isUpdate(true)->save($this->param);
        if($data){
            $res['nickname']  = $this->param['nickname'];
            $res['userid']  = $this->param['nickname'];
            $res['sex']  = $this->param['sex'];
            $this->getBackTo('获取成功',0,$res);
        }else{
             $this->getBackTo('获取失败',1);
        }

    }

插件地址：https://pan.baidu.com/s/1SzwHtKe_sU2mjWC4_RLNaQ 提取码：t8iw