tp5使用layui实现多个图片上传(带附件选择)的方法实例

标题：tp5使用layui实现多个图片上传(带附件选择)的方法实例

在TP5中，结合layui组件可以非常方便地实现多个图片上传的功能。本文详细介绍了该功能的实现方法，包括附件选择、图片预览等功能。

一、引入layui组件

在TP5中，我们可以通过composer集成layui组件，需要在composer.json文件中添加以下代码：

"require": {
    "topthink/think-layui": "^1.1"
}

然后在终端执行 composer update 命令进行更新。

二、前端实现

在前端页面中，我们需要引入layui的JavaScript和CSS文件，同时需要谨慎的设置HTML结构。示例如下：

<div class="layui-upload">
    <button type="button" class="layui-btn layui-btn-sm" id="testList">选择图片</button>
    <div class="layui-upload-list">
        <table class="layui-table">
            <thead>
            <tr>
                <th>文件名</th>
                <th>大小</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody id="demoList"></tbody>
        </table>
        <input type="hidden" name="images">
    </div> 
</div>

这里，我们定义了一个用于显示上传图片列表的表格，其中包含了文件名、大小、状态和操作等列。同时还设置了一个隐藏域用来保存上传成功后的图片地址。

接下来，在JavaScript中，我们需要定义一个上传组件并初始化：

layui.use(['upload'], function () {
    var upload = layui.upload;

    //执行实例
    var uploadInst = upload.render({
        elem: '#testList',
        url: '<?php echo url("admin/upload/uploadImages"); ?>',
        multiple: true,
        acceptMime: 'image/*',
        auto: false,
        bindAction: '#uploadImages',
        choose: function (obj) {
            var files = obj.pushFile();
            //预读图片信息
            obj.preview(function (index, file, result) {
                console.log(index);
                console.log(file);
                console.log(result);
                var tr = $(['<tr id="upload-' + index + '"><td>' + file.name + '</td>',
                    '<td>' + file.size / 1024 + 'kb</td>',
                    '<td>等待上传</td>',
                    '<td><button type="button" class="btn btn-danger btn-xs demo-delete"><i class="glyphicon glyphicon-trash"></i>删除</button></td>',
                    '</tr>'].join(''));

                // 单个重传
                tr.find('.demo-reload').on('click', function () {
                    obj.upload(index, file);
                });

                //删除
                tr.find('.demo-delete').on('click', function () {
                    delete files[index];
                    tr.remove();
                });

                $('#demoList').append(tr);
            });
        },
        done: function (res, index, upload) {
            if (res.code === 0) { //上传成功
                $('#upload-' + index).html('<td>' + res.data.original_name + '</td><td>' + res.data.file_size + 'KB</td><td>上传成功</td>');
                $("input[name='images']").val($("input[name='images']").val() + "," + res.data.url);
            } else {
                layer.msg('上传失败!', {
                    icon: 5,
                    time: 2000
                });
            }
        },
        error: function (index, upload) {
            layer.msg('上传失败!', {
                icon: 5,
                time: 2000
            });
        }
    });
});

在这个上传组件中，我们定义了以下配置项：

• elem：指定上传按钮的ID，即选择图片的按钮；
• url：指定上传图片的后台接口地址；
• multiple：是否允许同时上传多张图片；
• acceptMime：指定允许上传的图片格式；
• auto：是否在选择图片后自动上传；
• bindAction：指定提交按钮的ID，即上传按钮，这里是将上传图片的根据选择后的图片上传至服务器；
• choose：选择图片后的回调函数，可以在此函数中预读图片信息并进行显示；
• done：上传成功后的回调函数，可以在此函数中保存上传成功后的图片地址；
• error：上传失败后的回调函数，可以在此函数中进行异常处理。

其中，关键代码如下：

var uploadInst = upload.render({
    elem: '#testList',
    url: '<?php echo url("admin/upload/uploadImages"); ?>',
    multiple: true,
    acceptMime: 'image/*',
    auto: false,
    bindAction: '#uploadImages',
    choose: function (obj) {
        var files = obj.pushFile();
        //预读图片信息
        obj.preview(function (index, file, result) {
            var tr = $(['<tr id="upload-' + index + '"><td>' + file.name + '</td>',
                '<td>' + file.size / 1024 + 'kb</td>',
                '<td>等待上传</td>',
                '<td><button type="button" class="btn btn-danger btn-xs demo-delete"><i class="glyphicon glyphicon-trash"></i>删除</button></td>',
                '</tr>'].join(''));

            //删除
            tr.find('.demo-delete').on('click', function () {
                delete files[index];
                tr.remove();
            });

            $('#demoList').append(tr);
        });
    },
    done: function (res, index, upload) {
        if (res.code === 0) { //上传成功
            $('#upload-' + index).html('<td>' + res.data.original_name + '</td><td>' + res.data.file_size + 'KB</td><td>上传成功</td>');
            $("input[name='images']").val($("input[name='images']").val() + "," + res.data.url);
        } else {
            layer.msg('上传失败!', {
                icon: 5,
                time: 2000
            });
        }
    },
    error: function (index, upload) {
        layer.msg('上传失败!', {
            icon: 5,
            time: 2000
        });
    }
});

三、后端实现

在后台控制器中，我们需要定义一个用于接收图片上传请求的接口函数：

/**
 * 处理图片上传
 */
public function uploadImages()
{
    $images = request()->file('file');
    $data   = [];
    foreach ($images as $file) {
        $path        = 'upload/images/';
        $fileInfo    = $file->move($path);
        if ($fileInfo) {
            //保存数据到数组
            $data[] = [
                'url'           => $path . $fileInfo->getSaveName(),
                'original_name' => $fileInfo->getInfo('name'),
                'file_size'     => $fileInfo->getInfo('size') / 1024
            ];
        }
    }
    $result = ['code' => 0, 'msg' => '上传成功', 'data' => $data];
    return json_encode($result);
}

在这里我们利用TP5自带的Request类的 file() 方法获取上传的所有文件，然后对每个文件进行处理并返回数据。

完成以上操作，就可以让多个图片上传上传的功能实现。如果你想加强图片浏览功能，你也可以参考layui的图片预览组件。