ThinkAdmin/app/admin/view/api/image.html

<div class="image-dialog" id="ImageDialog">
    <div class="image-dialog-head">
        <div class="pull-right">
            <a data-file="one" data-type="jpg,png" class="layui-btn layui-btn-sm">上传图片</a>
        </div>
    </div>
    <div class="image-dialog-body upload-image-mdbox flex flex-wrap flex-align-start">
        <div class="image-dialog-item" v-for="x in items">
            <div class="uploadimage" :style="x.style"></div>
        </div>
    </div>
</div>

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

    .image-dialog-body {
        height: 500px;
        background: #efefef;
        padding-top: 15px;
        padding-left: 15px;
    }

    .image-dialog-item {
        margin-right: 15px;
        margin-bottom: 15px;
    }

    .image-dialog-item .uploadimage {
        margin: 0
    }
</style>

<script>
    require(['vue'], function (vue) {
        new vue({
            el: '#ImageDialog',
            data: {
                page: 1,
                items: []
            },
            created: function () {
                this.loadPage();
            },
            methods: {
                loadPage: function () {
                    var that = this;
                    this.params = {page: this.page, output: 'layui.table'};
                    $.form.load('{:url("image")}', this.params, 'get', function (ret) {
                        that.items = that.items.concat(ret.data);
                        that.items.forEach(function (item) {
                            item.style = 'background-image:url(' + item.xurl + ')';
                        });
                        console.log(that.items)
                        return false;
                    });
                }
            }
        });
    });
</script>