ThinkAdmin/app/admin/view/api/upload/image.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 layui-btn-normal" @click="uploadImage">上传图片</a>
        </div>
    </div>
    <div class="image-dialog-body">
        <div class="image-dialog-item" v-for="x in list" @click="setItem(x)" style="display:none" v-show="show" :class="{'image-dialog-checked':x.checked}">
            <div class="uploadimage" :style="x.style"></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 id="ImageDialogButton" class="image-dialog-button" v-if="data.length>0" @click="confirm">{{data.length}}</div>
    </div>
</div>

<script>
    require(['vue'], function (vue) {
        var app = new vue({
            el: '#ImageDialog',
            data: {
                page: 1,
                limit: 15,
                show: false,
                mult: false,
                keys: '',
                list: [],
                data: [],
                idxs: {},
            },
            created: function () {
                this.$btn = $('#{$get.id|default=""}');
                this.$ups = $('#ImageDialogUploadLayout [data-file]');
                this.mult = "{$get.file|default='image'}" === 'images';
                this.loadPage();
            },
            methods: {
                // 搜索刷新数据
                search: function () {
                    this.page = 1;
                    this.loadPage();
                },
                // 设置单项数据
                setItem: function (item) {
                    if (!this.mult) return this.setValue(item.xurl);
                    if ((item.checked = !this.idxs[item.id])) {
                        (this.idxs[item.id] = item) && this.data.push(item);
                    } else {
                        delete this.idxs[item.id];
                        layui.each(this.data, function (idx, _ite) {
                            _ite.id === item.id && app.data.splice(idx, 1);
                        });
                    }
                },
                // 更新列表数据
                setList: function (items, count) {
                    this.list = items;
                    this.list.forEach(function (item) {
                        item.checked = !!app.idxs[item.id]
                        item.style = 'background-image:url(' + item.xurl + ')';
                    });
                    this.addPage(count);
                },
                // 确认选择数据
                confirm: function () {
                    layui.each(this.data, function (idx, file) {
                        app.setValue(file.xurl);
                    });
                },
                // 设置选择数据
                setValue: function (url) {
                    this.$btn.triggerHandler('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');
                },
                // 创建分页工具条
                addPage: function (count) {
                    this.show = true;
                    layui.laypage.render({
                        curr: this.page, count: count, limit: app.limit,
                        layout: ['count', 'prev', 'page', 'next', 'refresh'],
                        elem: 'ImageDialogPage', jump: function (obj, first) {
                            if (!first) app.loadPage(app.page = obj.curr);
                        },
                    });
                },
                // 加载页面数据
                loadPage: function () {
                    this.params = {page: this.page, limit: this.limit, output: 'layui.table', name: this.keys || ''};
                    $.form.load('{:url("image")}', this.params, 'get', function (ret) {
                        return app.setList(ret.data, ret.count), false;
                    });
                },
                // 上传图片文件
                uploadImage: function () {
                    this.$ups.off('choose').on('choose', function (e, xurl) {
                        app.setValue(xurl);
                    }).click();
                },
            }
        });
    });
</script>

<label class="layui-hide" id="ImageDialogUploadLayout">
    <!-- 图片上传组件 开始 -->
    {if isset($get.file) && $get.file eq 'image'}
    <button class="layui-btn" data-file data-type="png,jpg,jpeg,gif"></button>
    {else}
    <button class="layui-btn" data-file="mul" data-type="png,jpg,jpeg,gif"></button>
    {/if}
    <!-- 图片上传组件 结束 -->
</label>