<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: {
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()
},
fileBoxDragenter(flag) {
console.log('handlePictureBoxDragenter==')
this.boxLock = true
setTimeout(() => {
this.boxLock = false
}, 10)
this.dropType = flag
},
fileBoxDragleave() {
console.log('handlePictureBoxDragleave===')
if (this.boxLock) return
this.dropType = false
},
fileBoxDrop(e) {
this.dropType = false
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>