背景：前后端分离项目，使用的框架：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;}}

以上就是此次内容，有什么不懂的请留言。

---

分割线

分享个vue学习的教程

本人亲自维护的接口

非常适合vue零基础或者刚入门vue的小白学习。

资源包括源码、视频、接口文档，从入门到实战项目

如果你想学习vue，这里有个项目线上尝鲜地址：http://129.226.76.172:5325

---