Thinkphp5.1+bootstrap插件多图片上传图解教程（上）

很早之前就想学习TP5的多图上传插件，1年半都想学，百度了很久都看的云里雾里，今天终于会用在项目里了，代码也是网上找的。

这里要重点说明下，Thinkphp5提供的语法和快捷方法太多，查询数据的方式好几种，我这里数据库查询是在model里做了封装，例如 GoodsFilesModel。所以很多新手就会挂在这个地方，多去查下TP5的数据操作手册，和理解你自己看的课程的数据库封装模式，从而选择适合的自己的数据库操作语句。
毕竟没有一套实战课程把所有的日常功能都做完，然后把别的视频有的功能放到另个项目里就各种不对，原因就是TP5提供的方法很多，只能是多看多做几个项目，慢慢就理解了。

1、TP5下载图片上传类库，TP5默认extend扩展文件夹是没有upload的，
（1）扩展库下载地址
https://github.com/top-think/thinkphp-extend
（2）把解压出来的com和org文件夹放到 网站根目录下thinkphp/extend目录下
TP5.1

image.png

（3）TP5后台控制器需要引入

image.png

2、前后台
（1）引入2个样式文件和4个js文件,地址改成自己的外网的可以不用改，为了速度建议下载到本地

如果你的前端框架是基于bootstrap的可以不用引入

样式文件引入

js文件引入

（2）模版表单

    


        

            上传图片：
            

                上传轮播图片
                

                

                最多支持4张轮播图
            
        

        

            
            

               

                  

                      

                          ×
                            

                               
上传图片
                            
                          

                              

                              
                              

                                 

                                    
                                    

                                 
                              
                          
                      
                  
               
            
         
    
    

（3）前端图片上传、预览、删除相关js

（4）TP5.18后台 图片上传方法 和 图片删除方法
保存图片路径到数据库，有个返回存入的id值， TP5.0可以使用add() 但是TP5.1 要使用insertGetId() ，用save()是保存并获取条数。

    //商品图片上传
    public function product_add_images(){
        $upload = new  \org\Upload();// 实例化上传类
        $upload->maxSize   =     3145728 ;// 设置附件上传大小
        $upload->exts      =     array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
        $upload->rootPath  =      './static/files/'; // 设置附件上传目录    // 上传文件
        $upload->saveName=time().rand(1111,9999);
        $date=date("Y-m-d",time());//已上传日期为子目录名
        $upload->saveExt="png";//上传的文件后缀
        $info   =   $upload->upload();
        if(!$info) {// 上传错误提示错误信息
            $this->error($upload->getError());
        }else{// 上传成功
            $m = new GoodsFilesModel();
            $data['filepath']='/static/files/'.$date."/".$upload->saveName.".".$upload->saveExt;
            $result=$m->insertGetId($data);  
            $file=['id'=>$result,'imagepath'=>$data['filepath']];
            echo json_encode($file);
        }
    }


    //商品图片删除
    public function product_del_images(){
        $m = new GoodsFilesModel();
        $result=$m->destroy($_GET['id']);
        if($result){
            echo 1;
        }else{
            echo 0;
        }
    }

2、效果展示
选择图片

image.png

删除并更换1张图片

image.png

上传中

image.png

上传成功

image.png

删除2张试下

image.png

3、数据库
已成功插入数据,插入数据库时记得使用通过insertGetId() 方法返回id，后面要用到

image.png

4、还需要把这个商品的返会的ID——>储存在该商品数据表的一个字段中——>修改编辑及前台遍历显示图片。
（方法更新中）
下图是商品表，imagepath字段保留该商品所有图片id，后续前台轮播图和商品修改时就可以使用了。

image.png

5、项目前台完整代码

反复测试，已经把没有用的代码全部删除掉了。

    
    
    
    
    

    
    



 

    

        

            上传图片：
            

                上传轮播图片
                

                

                最多支持4张轮播图
            
        

        

            

               

                  

                      

                          ×
                            

                               
上传图片