js中，如何获取批量传入文件的大小，名称，进行循环展示。

        <div class="handle">
                <div class="handle-box" id="drop_area" v-on:drop="dropClick">
                    <div class="handle-btn">
                        <img class="btn-icon" src="./images/compress/new-btn-icon.png" alt="">
                        选择图片
                        <input class="in-btn" id="upload" v-on:change="change" type="file" value=""
                            multiple="multiple" />

                    </div>
                    <p class="handle-desc">或将图片拖拽到此处</p>
                    <p class="handle-txt">支持格式:JPG、PNG、GIF、BMP</p>
                </div>
            </div>
            <div class="compress-list" v-if=" list.length > 0 " v-cloak>
                <ul class="tab-header">
                    <li class="header1 tab-txt">文件名</li>
                    <li class="header2 tab-txt">压缩前</li>
                    <li class="header3 tab-txt">状态</li>
                    <li class="header4 tab-txt">压缩率</li>
                    <li class="header5 tab-txt">操作</li>
                </ul>
                <ul class="tab-header tab-list" v-for="(item,i) in list" :key="i">
                    <li class="header1 tab-txt">{{item.name}}</li>
                    <li class="header2 tab-txt">{{(item.size/1024).toFixed(2)}}KB</li>
                    <li class="header3 tab-txt">
                        <div class="line2" v-if="item.onCompress == 1">
                            <div class="m-line"></div>
                            <div class="move"> </div>
                        </div>
                        <div class="line3" v-if="item.onCompress == 2">
                            <div class="line3-box"></div>
                        </div>
                    </li>
                    <li class="header4 tab-txt">-{{item.onCompress == 2 ? item.number +'%' : ''}}</li>
                    <li class="header5 tab-txt cur" @click="downFile">
                        <span v-if="item.onCompress == 2" class="down dFile">下载</span>
                        <span v-else class="dFile">取消</span>
                    </li>
                </ul>

            </div>

$(function () {

    var app = new Vue({
        el: '.model',
        data: function () {
            return {
                active: 1,
                onCompress: 1,
                list: [],
            }
        },
        mounted: function () {

            document.addEventListener("drop", function (e) {  //拖离   
                e.preventDefault();
            })
            document.addEventListener("dragleave", function (e) {  //拖后放   
                e.preventDefault();
            })
            document.addEventListener("dragenter", function (e) {  //拖进  
                e.preventDefault();
            })
            document.addEventListener("dragover", function (e) {  //拖来拖去    
                e.preventDefault();
            })

        },
        destroyed: function () {

        },
        methods: {
            getRandom: function (n, m) {
                var num = Math.floor(Math.random() * (m - n + 1) + n)
                return num
            },
/// 通过 change 时间获取文件
            change: function () {
                var obj = document.getElementById("upload");
                var len = obj.files.length;
                var that = this;
                for (let i = 0; i < len; i++) {
                    obj.files[i].onCompress = 1;
                    var number = this.getRandom(70, 80)
                    obj.files[i].number = number;
                    setTimeout(function () {
                        for (let j = 0; j < len; j++) {
                            obj.files[j].onCompress = 2;
                            that.$forceUpdate();
                        }
                    }, 500)
                    this.list.push(obj.files[i])
                }
            },
            dropClick: function (e) {
///  拖拽情况获取文件
                var fileList = Array.from(e.dataTransfer.files);
                var that = this;

                for (var i = 0; i < fileList.length; i++) {
                    fileList[i].onCompress = 1;
                    var number = this.getRandom(70, 80)
                    fileList[i].number = number;
                    setTimeout(function () {
                        for (let j = 0; j < fileList.length; j++) {
                            fileList[j].onCompress = 2;
                            that.$forceUpdate();
                        }

                    }, 500)
                    that.list.push(fileList[i]);
                }
            },
            downFile: function () {
                $('#dialog').show()
            },
            changeActive: function (v) {
                this.active = v;
            }
        }
    });
});