vue 点击或者拖拽 上传单文件或多文件 并读取文件内容

<file-read :fileReadDialog.sync="fileReadDialog" fileType='json' :multiple="true"></file-read>

<template>
    <div>
        <el-dialog
            :modal="true"
            :modal-append-to-body="false"
            title="上传"
            width="30%"
            :visible.sync="dialogVisible"
            :before-close="handleClose"
        >
            <div>
                <div class="file-box"
                    :class="dropType ? 'dropbox-shadow' : ''"
                    type="file"
                    @dragenter.stop.prevent="fileBoxDragenter(true)"
                    @dragleave.stop.prevent="fileBoxDragleave"
                    @drop.stop.prevent="fileBoxDrop($event, true)"
                    @dragover.stop.prevent=""
                    @click="openFile">
                    <div><i class="el-icon-upload upload-icon"></i></div>
                    <div class="upload-text">
                        <span>将文件拖到此处，或</span>
                        <span>点击上传</span>
                    </div>
                </div>
                 <input ref="inputfile" class="file-content" type="file" :multiple="multiple" @change="inputFile">
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="confirmFileRead">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    props: {
        fileReadDialog: {  // 弹窗显示
            type: Boolean,
            default: false
        },
        fileType: {  // 上传文件格式
            type: String,
            default: 'txt'
        },
        multiple: {  // 单张false or 多张true
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            dropType: false, // 拖拽
            boxLock: false, // 拖拽
            innerHTMLList: [],  // 对文件进行读取
        }
    },
    computed: {
        dialogVisible() {
            return this.fileReadDialog
        }
    },
    mounted() {
    },
    methods: {
        /**
         * 取消
         */
        handleClose() {
            this.$emit('update:fileReadDialog', false)
            this.dropType = false
            this.boxLock = false
            this.innerHTMLList = []

        },

        /**
         * 确定
         */
        confirmFileRead() {
        },

        inputFile(e) {
            this.readFile(e.target.files)
        },

        openFile() {
            this.$refs.inputfile.click()
        },

        /**
         * 文件拖拽dragenter进入
         */
        fileBoxDragenter(flag) {
            console.log('handlePictureBoxDragenter==')
            // 这里传入一个10ms的延迟锁，让drapleave在enter延迟后触发
            this.boxLock = true
            setTimeout(() => {
                this.boxLock = false
            }, 10)
            // dropType屎文件拖拽进选中范围的高亮效果
            this.dropType = flag
        },

        /**
         * 文件拖拽dragleave离开
         */
        fileBoxDragleave() {
            console.log('handlePictureBoxDragleave===')
            if (this.boxLock) return
            this.dropType = false
        },

        /**
         * 文件拖拽drop落下
         */
        fileBoxDrop(e) {
            this.dropType = false
            // 判断file是文件夹还是文件
            const isDirectory = e.dataTransfer.items[0].webkitGetAsEntry().isDirectory
            let fileList = e.dataTransfer.files
            console.log(fileList)

            if (isDirectory) {
                this.$message({
                    message: `上传${this.fileType}文件`,
                    type: 'warning'
                })
                return
            }

            this.readFile(fileList)
        },

        /**
         * 文件-约束、读取
         */
        readFile(fileList) {
            console.log('readFile===', fileList)
            console.log(fileList.length)
            if(!this.multiple && fileList.length !== 1) {
                this.$message({
                    message: `不支持上传多文件`,
                    type: 'warning'
                })
                return
            }
            
            if ((!this.multiple && Object.keys(fileList).length !== 1 ) || (!this.multiple && Object.keys(this.fileLists).length !== 0)) {
                this.$message({
                    message: '最多支持一个文件',
                    type: 'warning'
                })
                return
            }

            let filterFileType = Object.keys(fileList).filter(item => {
                if (fileList[item].name.split('.')[1] !== this.fileType) {
                    return true
                }
                return false
            })
            if(filterFileType.length !== 0) {
                this.$message({
                    message: `只支持${this.fileType}格式`,
                    type: 'warning'
                })
                return
            }


            Object.keys(fileList).forEach(item => {
                console.log(fileList[item])
                const reader = new FileReader()
                reader.readAsText(fileList[item], 'utf8')
                reader.onload = () => {
                    console.log(reader)
                    console.log(reader.readyState)
                    this.innerHTMLList.push(reader.result)
                    console.log(this.innerHTMLList)
                }
                reader.onerror = () => {
                    console.log('onError')
                }
            })
        }
    }
}
</script>
<style lang="less" scoped>
/deep/ .el-upload {
    width: 100%;
}
/deep/ .el-upload-dragger {
    width: 100%;
}
.file-box {
    width: 100%;
    height: 180px;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    background-color: #fff;
    text-align: center;
    box-sizing: border-box;
    padding-top: 50px;
}
.file-box:hover {
    border-color: #409eff;
}
.file-content {
    display: none;
}
.upload-icon {
    color: #c0c4cc;
    font-size: 67px;
}
.upload-text {
    color: #606266;
    font-size: 14px;
    & > span:nth-child(2) {
        margin-left: 4px;
        color: #409eff;
    }
}
.dropbox-shadow {
    box-shadow: 0px 0px 12px #409eff;
}
</style>