tp5 （图片）多图上传并生成可访问的链接

声明常量，用来装网址名字，这样我们就不用每次去手动输入了，我在入口文件中声明的。

defined('__UPLOADURL__')   or define('__UPLOADURL__',  'http://tp5-expert.likeball.top');

 

html代码

<form action = "{:url('admin/Indexhome/carousel')}" method = 'post' enctype = 'multipart/form-data'>
<input type = 'file' name = 'file[]' multiple = 'multiple' id = '' value = '' />
<input type = 'text' name = 'former' value = '这里需要后台传过来值' />
<input class = 'layui-btn' type = 'submit' value = '提交' />
</form>

 

控制器（注意前端input框的name值要加[]数组的格式）

<?php
namespace app\admin\controller;
header( 'Content-Type:text/html;charset=utf-8' );
use think\Controller;
use think\Request;
use think\Loader;
class Indexhome extends Controller {
    //轮播
    public function carousel() {
        if ( $_FILES['file']['name'] == '' ) {
            //如果报错那么使用['goods_carousel']['name'][0]这个来判断是否为空
            //如果没有上传文件那么上传默认的图片
            $arr = input( 'former' );//接收默认图片
        } else {
            $file = request()->file( 'file' );
            foreach ( $file as $item ) {
                //移动到框架应用根目录/uploads/目录下
                $info = $item->move( ROOT_PATH . 'public' . DS . 'static/uploads' );
                if ( $info ) {
                    $saveName = str_replace( '\\', '/', $info->getSaveName() );
                    $img = '/static/uploads/' . $saveName;
                } else {
                    echo '文件上传失败' . '<br/>';
                }
                $data[] = explode( ',', $img );
            }
            $arr = '';
            foreach ( $data as $k => $v ) {
                $arr .= __UPLOADURL__.$v[0].',';
                //$ggtop[$k]['photo'] = __UPLOADURL__.$v['photo'];
            }
            //dump( $arr );
            // exit;
            $fin['picture'] = $arr;
            $fin['time'] = date( 'Y-m-d h:i:s', time() );
            $end = db( 'carousel' )->where( 'id', 1 )->update( $fin );
            if ( $end ) {
                $this->success( '增加成功' );
            } else {
                $this->error( '增加失败' );
            }
        }
    }
}

 

 

控制器处理刚插入的图片路径，方便前端用ajax请求；

代码：

    public function picture(){
    	$carousel = db('carousel')->where('id', 1)->find();
    	 // 消除字段最右边的符号
    	$picture = rtrim($carousel['picture'],",");
        //将字符串转为数字已逗号","分割
    	$explode = explode("," , $picture);
        //返回json数据类型，方便前端使用
    	return json($explode);
    }

 

用mui请求刚才上传的图片，生成轮播图

前端ajax页面请求读取，我用的是mui的框架所以，下载一个引入一下就可以了，地址 https://github.com/dcloudio/mui 

文档说的不是很好，放在根目录，我的是放在根目录如果不是自己在前面拼文件夹名字

 <link rel="stylesheet" href="mui-master/dist/css/mui.min.css" />

<script src="mui-master/dist/js/mui.min.js" type="text/javascript" charset="utf-8"></script>

js放在下面不知道的同学注意了（这个js放在最上面和css放在一起）。

<!--轮播开始-->
        <div class="lunbo">
            <div class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">

                </div>
                <div class="mui-slider-indicator">

                </div>
            </div>
        </div>
        <!--轮播结束-->


<script type="text/javascript">
    $(function() {
        $.ajax({
            type: 'POST',
            url: "http://tp5-expert.likeball.top/api/Indexhome/picture",
            dataType: 'json',
            success: function(data) {
                console.log(data);
                $('.mui-slider-group').empty();
                $('.mui-slider-indicator').empty();
                var length = data.length;
                if(length == 1) {
                    console.log(data[0]);
                    $('.mui-slider-group').append('<div class="mui-slider-item"><img class="lunbo-img" src="' + data[0] + '" /></div>');
                } else {
                    $('.mui-slider-group').append('<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="' + data[length - 1] + '" /></div>');
                    $('.mui-slider-indicator').append('<div class="mui-indicator mui-active"></div>');
                    for(var i = 0; i < length; i++) {
                        $('.mui-slider-group').append('<div class="mui-slider-item"><img class="lunbo-img" src="' + data[i] + '" /></div>');
                    }
                    $('.mui-slider-group').append('<div class="mui-slider-item mui-slider-item-duplicate"><img class="lunbo-img" src="' + data[0] + '" /></div>');
                    for(var i = 0; i < length - 1; i++) {
                        $('.mui-slider-indicator').append('<div class="mui-indicator"></div>');
                    }
                }
                var gallery = mui('.mui-slider');
                gallery.slider({
                    interval: 1000 //自动轮播周期，若为0则不自动播放，默认为0；
                });
            },
            error: function(error) {
                console.log('error');
            }
        });
    })
</script>