自制vue文件上传组件,UI丑的一批

<template>
  <div>
    <input ref="file" id="fileList" class="noDisplay" type="file" multiple @change="getFile" />
    <table>
      <colgroup>
        <col width="5%" />
        <col width="10%" />
        <col width="70%" />
        <col width="15%" />
      </colgroup>
      <tr>
        <td colspan="2">
          <label for="fileList" class="fileBtn">addFile</label>
        </td>

        <td colspan="2">
          <button class="uploadBtn" @click="deleteFile">删除文件</button>
          <button class="uploadBtn" @click="submitAddFile">点击上传</button>
        </td>
      </tr>
      <tr>
        <td>
          <input type="checkbox" v-model="selectAll" />
        </td>
        <td>序号</td>
        <td>文件名</td>
        <td>文件大小</td>
      </tr>
      <tr v-for="(item,i) in fileList" :key="i">
        <td>
          <input type="checkbox" :value="i" v-model="selectArr" />
        </td>
        <td>{{i+1}}</td>
        <td>{{item.name}}</td>
        <td>{{item.size | convertSize}}</td>
      </tr>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: "uploader",
  props:['fileData','config'],
    data: function(){
        return {
            extList:[],
            totalSize:0,
            originalFileList:[],//通过file 添加的文件 存在这个list中
            // fileList:[{name:"aaa.jpg",size:452110000,uniqueName:"001"},{name:"bbb.jpg",size:875410000,uniqueName:"002"},{name:"ccc.jpg",size:968510000,uniqueName:"003"}],
            fileList:[], //用来展示的文件list
            selectArr:[], // 选中的文件索引
            selectAll:false, // 全选与否
            deleteFileList:[] //删除的文件list,用来存储要删除的文件(已经上传到服务器上的)
        }
    },
    created:function(){
        this.extList = this.config.extList;
        this.totalSize = this.config.totalSize;
        this.fileList = this.fileData;

    },
    methods: {
        getFile:function(event){
            var files = event.target.files;
            let extIsOk = true;
            for(var i = 0;i<files.length;i++){
                //    上传类型判断
                var imgName = files[i].name;
                var idx = imgName.lastIndexOf(".");
                if (idx != -1){
                    var ext = imgName.substr(idx+1).toUpperCase();
                    ext = ext.toLowerCase();
                    if (this.config.extList.indexOf(ext)<0){
                        extIsOk = false;
                    }else{
                        if (this.totalfileSize <= this.totalSize) {
                            if (!this.isDuplicate(files[i])) {
                                this.originalFileList.push(files[i]);
                                this.fileList.push(files[i]);
                            }
                        } else {
                            alert("文件总大小超过了"+(this.totalSize/1024/1024)+"MB")
                        }

                    }
                }else{
                    extIsOk = false;
                }
            }
            if (!extIsOk) {
                alert("上传的文件格式不符合!")
            }
            //解决上传同一个文件,change 事件不触发的问题
            this.$refs.file.value = null;
        },
        submitAddFile:function(){
            let app = this;
            if(0 == this.originalFileList.length){
                alert("请选择要上传的文件")
                return;
            }
            var formData = new FormData();
            for(var i=0;i<this.originalFileList.length;i++){
                formData.append('fileList',this.originalFileList[i]);
            }
            let config = {
                headers: {
                    'Content-Type': 'multipart/form-data',
                }
            };
            axios.post("localhost:8081/fileupload2",formData,config)
                .then((response) => {
                    if(response.data=="success"){
                        app.deleteRemoteFile();
                    }
                });
        },
        deleteFile:function(){
            let app = this;
            let newList = [];
            app.fileList.forEach(function (item, i) {
                console.log(typeof app.selectArr[i]);
                if (app.selectArr.indexOf(i) < 0) {
                    //没被选择的文件是要保留的文件
                    newList.push(item);
                } else {
                    //记录要删除的已经上传过的附件
                    if (item.uniqueName) {
                        app.deleteFileList.push(item);
                    }

                }
            });
            app.fileList = newList;
            app.selectArr.splice(0);
        },
        deleteRemoteFile: function () {
            if (this.deleteFileList.length == 0) {
                alert("上传成功!")
                return
            }
            let paramObj = {fileList:this.deleteFileList};
            axios.post("localhost:8081/deleteFile",paramObj)
                .then((response) => {
                    if(response.data=="success"){
                        alert("上传成功!")
                    }
                })
        },
        isDuplicate:function(file){
            let duplicate = false;
            this.fileList.forEach(function (item,i) {
                if (file.name == item.name && file.size == item.size) {
                    alert(file.name+"已经存在!")
                    duplicate = true;
                }
            })
            return duplicate;

        }
    },
    computed: {
        totalfileSize: function () {
            let total = 0;
            for (const file of this.fileList) {
                total+= file.size;
            }
            return total;

        }
    },
    watch: {
        selectAll: function (newData,oldData) {
            var app = this;
            if (newData) {
                this.fileList.forEach(function (item, i) {
                    app.selectArr[i] = i;
                });
            } else {
                app.selectArr.splice(0);
            }
        }
    },
    filters:{
        convertSize:function(val){
            val = val/1024/1024;
            return val.toFixed(2) + "MB";
        }
    }
};
</script>
<style lang='' scoped>
table {
  width: 600px;
}
table tr td {
  border: 1px solid darkgray;
  border-radius: 5px;
}
.fileBtn {
  cursor: pointer;
  width: 20px;
  height: 10px;
  background-color: gainsboro;
}

.noDisplay {
  display: none;
}
.uploadBtn {
  float: right;
}
</style>