The results are as follows:

1.DOM code

1.1 input tag
Because we upload pictures by input tag, but the style of input tag is ugly, so we hide the style display: none.

 <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none"/>

1.2 Add Picture Button
If you need to use this method, just call @click="chooseType" at your upload button. The rest of the code is styled for reference only.

 <div class="add" @click="chooseType">
    <div class="add-image" align="center">
        <i class="icon-camera"></i> //The picture in the button is an icon Font icon
        <p class="font13">Add pictures</p>
    </div>
</div>

1.3 Picture Preview Area
If you need to use this method, you just need to do a v-for loop in your preview area to output the uploaded image set.

<div class="add-img" v-show="imgList.length">
    <p class="font14">picture(Up to 6 copies can be uploaded.<span v-text="6-imgList.length"></span>Zhang)</p>
    <ul class="img-list">
        <li v-for="(url,index) in imgList">
            <img class="del" src="../../assets/img/home/btn_clean.png" @click.stop="delImg(index)"/> 
            //del deletion style, icon Font icon need to find their own Oh
            <img :src="url.file.src">
        </li>
    </ul>
</div>

1.4 Picture Preview Area - Expansion (1.3 is simple to use, if there is time to follow-up will upload the complete case)
If you need to use this method, you just need to do a v-for loop in your preview area to output the uploaded image set. The lightbox component of Y-DUI is also used in this case. Please refer to it if necessary. Picture preview Call mode. Here, the lazy loading of vue and the adaptive method of css background image are also invoked.

<div class="add-img" v-show="imgList.length">
    <p class="font14">picture(Up to 6 copies can be uploaded.<span v-text="6-imgList.length"></span>Zhang)</p>
    <ul class="img-list">
        <li v-for="(url,index) in imgList">
            <img class="del" src="../../assets/img/home/btn_clean.png" @click.stop="delImg(index)"/>
            <yd-lightbox>
                <div class="app-bg">
                    <yd-lightbox-img class="app-bg" :original="url.file.src" v-lazy:background-image="{src: url.file.src, error: require('../../assets/img/common/img_placeholder400.png'), loading: require('../../assets/img/common/img_placeholder400.png')}"></yd-lightbox-img>
                </div>
            </yd-lightbox>
        </li>
    </ul>
</div>

2.JS code block

tips: The prompt here calls the pop-up window Y-DUI prompt box You can change it to your own prompt box.

<script>
    export default {
        name: "Feedback",
        data() {
            return {
                showFace: false,
                imgList: [],
                size: 0,
                limit:6, //Limit the number of images uploaded
                tempImgs:[]
            }
        },
        methods: {
            chooseType() {
                document.getElementById('upload_file').click();
            },
            fileChange(el) {
                if (!el.target.files[0].size) return;
                this.fileList(el.target);
                el.target.value = ''
            },
            fileList(fileList) {
                let files = fileList.files;
                for (let i = 0; i < files.length; i++) {
                    //Determine whether it is a folder or not
                    if (files[i].type != '') {
                        this.fileAdd(files[i]);
                    } else {
                        //Folder Processing
                        this.folders(fileList.items[i]);
                    }
                }
            },
            //Folder Processing
            folders(files) {
                let _this = this;
                //Determine whether it is a native file
                if (files.kind) {
                    files = files.webkitGetAsEntry();
                }
                files.createReader().readEntries(function (file) {
                    for (let i = 0; i < file.length; i++) {
                        if (file[i].isFile) {
                            _this.foldersAdd(file[i]);
                        } else {
                            _this.folders(file[i]);
                        }
                    }
                });

            },
            foldersAdd(entry) {
                let _this = this;
                entry.file(function (file) {
                    _this.fileAdd(file)
                })
            },
            fileAdd(file) {
                if (this.limit !== undefined) this.limit--;
                if (this.limit !== undefined && this.limit < 0) return;
                //Total size
                this.size = this.size + file.size;
                //Determine whether it is a picture file or not
                if (file.type.indexOf('image') == -1) {
                    this.$dialog.toast({mes: 'Please select Picture File'});
                } else {
                    let reader = new FileReader();
                    let image = new Image();
                    let _this = this;
                    reader.readAsDataURL(file);
                    reader.onload = function () {
                        file.src = this.result;
                        image.onload = function(){
                            let width = image.width;
                            let height = image.height;
                            file.width = width;
                            file.height = height;
                            _this.imgList.push({
                                file
                            });
                            console.log( _this.imgList);
                        };
                        image.src= file.src;
                    }
                }
            },
            delImg(index) {
                this.size = this.size - this.imgList[index].file.size;//Total size
                this.imgList.splice(index, 1);
                if (this.limit !== undefined) this.limit = 6-this.imgList.length;
            },
            displayImg() {

            }
        }
    }
</script>

3.CSS Style Code Block for Reference only

Lazy wife, there is no one-by-one distinction

   .app-bg >>>img{
        width: 100%;
        height: 100%;
        -webkit-transform: scale(1.03);
        -moz-transform: scale(1.03);
        -ms-transform: scale(1.03);
        -o-transform: scale(1.03);
        transform: scale(1.03);
    }
    textarea {
        padding: 10px;
    }

    .text-length {
        font-size: 14px;
        z-index: 999;
        width: 100%;
        text-align: right;
        margin-bottom: 10px;
        color: #e4e4e4;
    }

    .warning {
        color: #fe9900;
    }

    .add-img {
        width: 100%;
        padding: 10px;
    }

    .add-img p {
        color: #999;
    }

    .mui-content {
        padding-bottom: 60px;
    }

    .mui-content .idea {
        margin-top: 8px;
        background-color: #FFFFFF;
    }

    .good-item {
        text-align: center;
        width: 33%;
        max-width: 100%;
        overflow: hidden;
        padding-right: 10px;
        padding-bottom: 10px;
        float: left;
    }

    .good-item span {
        font-size: 15px;
        height: 30px;
        line-height: 30px;
        border-radius: 50px;
        display: block;
        width: 100%;
        color: #333;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border: 1px solid #CCCCCC;
    }

    .mui-table {
        padding-top: 10px;
        color: #333;
        padding-left: calc(0.5% + 10px);
    }

    .h-line-behind {
        line-height: 40px;
        padding-left: 10px;
    }

    .question {
        border: 0;
        margin-bottom: 10px;
    }

    .add {
        display: inline-block;
        margin-bottom: 20px;
    }

    .add-image {
        padding-top: 15px;
        margin-left: 10px;
        width: 80px;
        top: 20px;
        height: 80px;
        border: 1px dashed rgba(0, 0, 0, .2);
    }

    .add-image .icon-camera {
        font-size: 24px;
    }

    .good-item .choose {
        color: #fff;
        background-color: #87582E;
        color: #FFF;
        border: 0;
    }

    .mui-btn-block {
        border: 0;
        border-radius: 0;
        background-color: #87582E;
        color: #fff;
        margin-bottom: 0;
        bottom: 0;
    }

    .mui-buttom {
        position: fixed;
        width: 100%;
        bottom: 0;
        z-index: 999;

    }

    /*squared paper for practicing calligraphy*/
    .img-list {
        overflow: hidden;
    }

    .img-list > li {
        float: left;
        width: 32%;
        text-align: center;
        padding-top: 31%;
        margin-left: 1%;
        margin-top: 1%;
        position: relative;
    }

    .img-list > li > div {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    .img-list > li > div .app-bg {
        width: 100%;
        height: 100%;
    }

    .mui-fullscreen {
        z-index: 9999;
    }

    .del {
        position: absolute;
        width: 18px;
        top: 0;
        right: 0;
        z-index: 999
    }

This is our VUE 2.0 image upload method, if you have any questions, please leave a message.