php之tp5保存将base64保存为图片、vue上传图片（亲测通过）

最新推荐文章于 2024-08-11 12:00:00 发布

_不知道叫什么名字

最新推荐文章于 2024-08-11 12:00:00 发布

阅读量2k

点赞数

分类专栏： php IT学习文章标签： base64图片图片上传 tp5图片保存前后端分离图片上传

本文链接：https://blog.csdn.net/weixin_39514326/article/details/103824061

版权

php 同时被 2 个专栏收录

11 篇文章 1 订阅

订阅专栏

IT学习

7 篇文章 0 订阅

订阅专栏

背景：前后端分离项目，使用的框架：tp5+vue

概述：近日在开发网页的时候，有上传图片（文件）的问题，于是记录一下。我负责后端开发，所以这里主要讲接收文件流的问题

第一种方式：

1、前端以文件流方式+字段发送：
(图片是多图片格式，所以有中括号)
在这里插入图片描述 2、thinkphp后端接收多图片：

控制器接口

use app\user\model\UploadModel as UploadModel;

public function updateAdminInfo(){
$file=request()->file('pics');	//以文件流方式接收，此时表单的name字段为pics[]
        if(empty($request["company_name"])){return json(array('meta'=>['msg'=>'未携带参数','code'=>'401'],'data'=>""));}
        $upload_files_path=[];
        if(!empty($file)){            
            $upload_files_path = UploadModel::upload($file,'admin_logo_pic',$token_check[0].'_pic',"path");
            if(empty($upload_files_path)){
                return json(array('meta'=>['msg'=>'图片保存失败','code'=>'500'],'data'=>[]));
            }else{
                $request["company_logo"]=$upload_files_path[0]["file_path"];	//只拿取保存的第一个文件信息
            }
        }
  }

通用模型
UploadModel.php

public static function upload($files,$Folder,$name,$type){
        switch ($type){
            case 'path':
                //  文件路径
                $file_path = ROOT_PATH . 'public' . DS .'static'.DS.$Folder . DS .date('Ymd',time());
                $data = array();
//                var_dump($files);
//                exit();
                foreach ($files as $k => $file){
                    //  文件名
                    $file_name = $name.'_'.rand(1,999).'_'.date('YmdHis',time());
                    $info = $file->move($file_path,$file_name);
                    if($info){
                        $file_ext=$info->getExtension();
                        //  获取图片的存放相对路径
                        //$data[$k]['file_path'] = DS .'static'.DS. $Folder . DS .date('Ymd',time()). DS .$file_name.".".$file_ext;
                        $data[$k]['file_path'] = 'static/'. $Folder . "/" .date('Ymd',time()). "/" .$file_name.".".$file_ext;
                    }else{
                        echo $file->getError();
                    }
                }
                break;
            //  根据url生成本地图片,目前未使用该功能。
//            case 'url':
//                break;
        }
        //  数据返回
        return $data;
    }

这样子就完成了多图片的文件流接收。单图片的话也是类似，更加简单。

第二种方式：

1、前端将图片文件进行base64转化成字符形式。
然后还是使用json传送就行了。
在这里插入图片描述这种方式其实就是将图片压缩成字符传送

2、所以后端接收的时候，就还是跟就收json一样接收，只不过图片字段需要进行base64的反转弄成图片格式保存起来

public function updateAdminInfo()
    {
    $request = $this->request->param();
        if($request["company_logo"]!=""){

            $request["company_logo"] = UploadModel::pic_decode_base64($request["company_logo"],$token_check[0].'_pic_','admin_logo_pic');
            if(!$request["company_logo"]){
                return json(array('meta'=>['msg'=>'图片保存失败','code'=>'500'],'data'=>[]));
            }
        }

    }

UploadModel.php

public static function pic_decode_base64($pic_data,$user_id,$Folder){
        $reg = '/data:image\/(\w+?);base64,(.+)$/si';
         preg_match($reg,$pic_data,$match_result);
        $file_path = ROOT_PATH . 'public' . DS .'static'.DS.$Folder . DS .date('Ymd',time()). DS;
            //  文件名
        $file_name = $user_id.rand(1,999).'_'.date('YmdHis',time()).'.'.$match_result[1];

         $pic_path = $file_path.$file_name;
         $num = file_put_contents($pic_path,base64_decode($match_result[2]));
        if(!empty($num)){
            return 'static/'. $Folder . "/" .date('Ymd',time()). "/" .$file_name;
         }else{
            return false;
        }
    }