在TP5.1中如何优雅的使用批量上传图片

最近在开发社区超市项目的过程中，因为产品部分缩略图是多图片上传模式，在研究了TP官方文档的多图上传后在用户体验上没有达到理想的效果，后来通过查询相关资料，然后结合plupload组件解决！在此记一下！效果如下图：

下面我把基本流程走一下！

1、下载pupload组件，解压放入TP 相关目录

链接: https://pan.baidu.com/s/1gd77FwW1ohCHavJqC9Yjew 提取码: 739v 复制这段内容后打开百度网盘手机App，操作更方便哦

2、在view表单页面要引入JS组件

 

表单引入部分如下：

       

           商品图片
           

               

                   
                    选择图片
                    开始上传
                   

               

           

       

           
           

               立即保存
           

       

3、控制器处理部分 - 模板中ajax指向的地址部分

public function upfile(){
    $images = $this->request->file('file');
    $imgPath = 'public' . DS . 'uploads'; //保存路径
    $info = $images->move(ROOT_PATH . $imgPath);
    $path = '/uploads/'.date('Ymd',time()).'/'.$info->getFilename(); //返回路径
    return json(['status'=>'success','data'=>['img_url'=>$path]]);
}

搞定，收！