ship-expert/app/admin/view/api/upload/document.html

<div class="image-dialog" id="ImageDialog">
    <div class="image-dialog-head">
        <div class="pull-left flex">
            <input class="layui-input margin-right-5" v-model="keys" style="height:30px;line-height:30px" placeholder="请输入搜索关键词">
            <a class="layui-btn layui-btn-sm layui-btn-normal" @click="search">搜 索</a>
        </div>
        <div class="pull-right">
            <a class="layui-btn layui-btn-sm" @click="uploadImage">上传图片</a>
        </div>
    </div>
    <div class="image-dialog-body">
        <div class="image-dialog-item" v-for="x in items" v-if="show">
            <div class="uploadimage" :style="x.style" @click="setValue(x.xurl)"></div>
            <p class="image-dialog-item-name layui-elip" v-text="x.name"></p>
        </div>
    </div>
    <div class="image-dialog-foot">
        <div id="ImageDialogPage" class="image-dialog-page"></div>
    </div>
</div>

<style>
    .image-dialog-head {
        clear: both;
        height: 30px;
        padding: 10px 12px;
    }

    .image-dialog-body {
        height: 470px;
        background: #efefef;
        padding-top: 12px;
        padding-left: 12px;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    .image-dialog-item {
        position: relative;
        margin-right: 12px;
        margin-bottom: 12px;
    }

    .image-dialog-item-name {
        left: 0;
        right: 0;
        bottom: 0;
        color: #fff;
        padding: 3px 10px;
        position: absolute;
        text-align: center;
        line-height: 1.5em;
        white-space: nowrap;
        background: rgba(0, 0, 0, 0.6);
    }

    .image-dialog-item .uploadimage {
        margin: 0;
        width: 145px;
        height: 145px;
    }

    .image-dialog-foot {
        padding: 0 12px;
    }

    .image-dialog-page {
        height: 50px;
        text-align: center;
    }

    .image-dialog-page .layui-laypage a,
    .image-dialog-page .layui-laypage span {
        margin-bottom: 0;
    }
</style>

<script>
    require(['vue'], function (vue) {
        var app = new vue({
            el: '#ImageDialog',
            data: {
                page: 1,
                limit: 15,
                show: false,
                $btn: null,
                keys: '',
                items: [],
            },
            created: function () {
                this.$btn = $('#{$get.id|default=""}');
                this.loadPage();
            },
            methods: {
                // 创建分页工具条
                addPage: function (count) {
                    var that = this;
                    this.show = true;
                    layui.laypage.render({
                        curr: this.page, count: count, limit: that.limit,
                        layout: ['count', 'prev', 'page', 'next', 'refresh'],
                        elem: 'ImageDialogPage', jump: function (obj, first) {
                            if (!first) that.loadPage(that.page = obj.curr);
                        },
                    });
                },
                // 搜索刷新数据
                search: function () {
                    this.page = 1;
                    this.loadPage();
                },
                // 设置选择数据
                setValue: function (url) {
                    this.$btn.trigger('choose', url);
                    if (this.$btn.data('input')) $(this.$btn.data('input')).val(url).trigger('change', url);
                    $('#ImageDialog').parents('.layui-layer-content').next().find('.layui-layer-close').trigger('click');
                },
                // 加载页面数据
                loadPage: function () {
                    var that = this;
                    this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''};
                    $.form.load('{:url("image")}', this.params, 'get', function (ret) {
                        that.addPage(ret.count);
                        that.items = ret.data;
                        that.items.forEach(function (item) {
                            item.style = 'background-image:url(' + item.xurl + ')';
                        });
                        return false;
                    });
                },
                // 上传图片文件
                uploadImage: function () {
                    $('[data-field="image-dialog-upload-input"]').click();
                    $('[name="image-dialog-upload-input"]').one('change', function (e) {
                        app.setValue(e.currentTarget.value);
                        // e.currentTarget.value 取上传后的值
                        // app.page = 1;
                        // app.loadPage();
                    });
                },
            }
        });
    });
</script>

<label class="layui-hide">
    <!-- 图片上传组件 开始 -->
    <input class="layui-input" name="image-dialog-upload-input">
    <button class="layui-btn" data-file data-type="png,jpg,jpeg,gif" data-field="image-dialog-upload-input"></button>
    <!-- 图片上传组件 结束 -->
</label>