SOURCE

const app = new Vue({
    el: '#app',
    data() {
        return {
            files: [
                {
                    url: 'https://pic3.zhimg.com/v2-058f646c41b55206f8110489d82fa103_is.jpg',
                    name: 'user.jpg'
                }
            ],
            maxSize: 1024 * 10, // 10 KB
            previewIMG: null,
            limit: 3,
            isPreview: false,
            type: 2, // 0 预览模式 1 列表模式 2 预览模式 + 上传按钮
        }
    },
    methods: {
        oversize(file) {
            console.log('oversize')
            console.log('filesize:' + file.size / 1024 + 'KB')
        },

        afterRead(file) {
            console.log('after-read')
            console.log(file)
        },

        beforeRemove(index, file) {
            console.log(index, file)
            return true
        },

        preview(index, file) {
            this.previewIMG = file.url
            this.isPreview = true
        },

        exceed() {
            alert(`只能上传${this.limit}张图片`)
        },

        beforeRead(files) {
            console.log('before-read')
            for (let i = 0, len = files.length; i < len; i++) {
                const file = files[i]
                if (file.type != 'image/jpeg' && file.type != 'image/png') {
                    alert('只能上传jpg和png格式的图片')
                    return false
                }
            }

            return true
        },

        closePreview() {
            this.isPreview = false
        }
    }
})

<script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
<script src="https://unpkg.com/vue-upload-imgs/dist/VueUploadImgs.iife.min.js"></script>
<div id="app">
    <vue-upload-imgs 
        multiple
        compress
        disabled
        :before-read="beforeRead"
        :after-read="afterRead"
        :before-remove="beforeRemove"
        :limit="limit"
        :type="type"
        @preview="preview"
        @exceed="exceed"
        @oversize="oversize"
        v-model="files"
    >
    <div>只能上传3张图片</div>
    </vue-upload-imgs>
    <div class="preview-bg" v-show="isPreview">
        <div class="dialog">
            <button class="close-preview" @click="closePreview">关闭</button>
            <img :src="previewIMG" class="preview-img">
        </div>
    </div>
</div>

.preview-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.5);
    overflow: auto;
}
.dialog img {
    display: block;
    margin: auto;
    margin-top: 10vh;
}
.close-preview {
    position: fixed;
    top: 2vh;
    left: 10vw;
    transform: translateX(-50%);
    font-size: 20px;
}