LayUI 多图上传操作实例参考

♙ 背景

• 最近开发新项目的后台，需要上传多张图片的功能，并且使用的是 Layui 前端框架，在整合效果的过程中，也是费了好多时间，在此稍作记录，希望能帮到各位道友！谢谢…

✄ 操作步骤

• 本文，主要展示核心的操作代码，当然注意是在引入 layui.css、layui.js 的前提下(赘述一番)

① 首先，展示一下效果：

②. 局部 html 代码参考

• 注意下面的第一行代码：

<input type="hidden" name="slide_show" class="multiple_show_img" value="">

此 作为隐藏域，用于保存多图上传的资源数组，方便后期进行 form 表单的提交

<input type="hidden" name="slide_show" class="multiple_show_img" value="">
    <div class="layui-form-item">
        <label class="layui-form-label">轮播图片：label>
        <div class="layui-upload">
            <button type="button" class="layui-btn" id="multiple_img_upload">多图片上传button>
            <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                预览：
                <div class="layui-upload-list" id="div-slide_show">div>
            blockquote>
        div>
    div>

③. 核心 js 代码参考

• 参考 layUI 官方文档，以及下面所作的部分解释，应该能看个八分懂吧 …

//多图容器 【注册全局变量】
var multiple_images = [];
layui.use('upload', function () {
        var upload = layui.upload;
		//多图片上传
        upload.render({
            elem: '#multiple_img_upload'
            ,url: '/api/upload/img_file'
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#div-slide_show').append('+ result +'" alt="'+ file.name
                        +'" title="点击删除" class="layui-upload-img" οnclick="delMultipleImgs(this)">')
                });
            }
            ,done: function(res){
                //如果上传成功
                if (res.status == 1) {
                    //追加图片成功追加文件名至图片容器
                    multiple_images.push(res.data.url);
                    $('.multiple_show_img').val(multiple_images);
                }else {
                	//提示信息
                    dialog.tip(res.message);
                }
            }
        });

    });

    //单击图片删除图片 【注册全局函数】
    function delMultipleImgs(this_img){
        //获取下标
        var subscript=$("#div-slide_show img").index(this_img);
        //删除图片
        this_img.remove();
        //删除数组
        multiple_images.splice(subscript, 1);
        //重新排序
        multiple_images.sort();
        $('.multiple_show_img').val(multiple_images);
        //console.log("multiple_images",multiple_images);
        //返回
        return ;
    }

④. 补充参考 PHP 后台上传图片资源的代码

• 毕竟本小白是个PHPer，语言都是相通的，不要太纠结.

namespace app\api\Controller;
use think\Request;
class Upload
{
    /**
     * 单一图片的上传操作
     * @param Request $request
     */
    public function img_file(Request $request)
    {
        $status = 0;
        $data = [];
        if ($request->Method()== 'POST') {
            $file = $request->file('file');
            // 移动到框架应用根目录/upload/ 目录下
            $info = $file->move('upload');
            if ($info){
                //把反斜杠(\)替换成斜杠(/) 因为在windows下上传路是反斜杠径
                $getSaveName=str_replace("\\","/",$info->getSaveName());
                $fileUrl = '/upload/'.$getSaveName;
                $status = 1;
                $data['url'] = $fileUrl;
                $message = '上传成功';
            }else{
                $message = "上传失败 ".$file->getError();
            }
        } else {
            $message = "参数错误";
        }
        return showMsg($status, $message,$data);
    }
}

♖ 附录

• 多多动手，实际操作一下就会发现，没啥难的，就分个好不好看而已…

参考： layui上传多张图片时删除其中某一张图片