Oneric/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Pull requests Activity

perf[upload-excel]: support drag upload

Browse source
This commit is contained in:
Pan 2018-01-02 16:30:59 +08:00
parent ea7e139696
commit 1d0b26cec8
1 changed files with 37 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/components/UploadExcel/index.vue
View file

@ -1,7 +1,10 @@
<template> <template>
<div> <div>
<el-button :loading="loading" type="primary" @click="handleUpload">select excel file</el-button>
<input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange"> <input id="excel-upload-input" type="file" accept=".xlsx, .xls" class="c-hide" @change="handkeFileChange">
<div id="drop" @drop="handleDrop" @dragover="handleDragover" @dragenter="handleDragover">
Drop excel file here or
<el-button style="margin-left:16px;" size="mini" type="primary" @click="handleUpload">browse</el-button>
</div>
</div> </div>
</template> </template>
@ -22,16 +25,35 @@ export default {
generateDate({ header, results }) { generateDate({ header, results }) {
this.excelData.header = header this.excelData.header = header
this.excelData.results = results this.excelData.results = results
this.loading = false
this.$emit('on-selected-file', this.excelData) this.$emit('on-selected-file', this.excelData)
}, },
handleDrop(e) {
e.stopPropagation()
e.preventDefault()
const files = e.dataTransfer.files
if (files.length !== 1) {
this.$message.error('Only support uploading one file!')
return
}
const itemFile = files[0] // only use files[0]
this.readerData(itemFile)
e.stopPropagation()
e.preventDefault()
},
handleDragover(e) {
e.stopPropagation()
e.preventDefault()
e.dataTransfer.dropEffect = 'copy'
},
handleUpload() { handleUpload() {
document.getElementById('excel-upload-input').click() document.getElementById('excel-upload-input').click()
}, },
handkeFileChange(e) { handkeFileChange(e) {
this.loading = true
const files = e.target.files const files = e.target.files
const itemFile = files[0] // only use files[0] const itemFile = files[0] // only use files[0]
this.readerData(itemFile)
},
readerData(itemFile) {
const reader = new FileReader() const reader = new FileReader()
reader.onload = e => { reader.onload = e => {
const data = e.target.result const data = e.target.result
@ -75,4 +97,16 @@ export default {
display: none; display: none;
z-index: -9999; z-index: -9999;
} }
#drop{
border: 2px dashed #bbb;
width: 600px;
height: 160px;
line-height: 160px;
margin: 0 auto;
font-size: 24px;
border-radius: 5px;
text-align: center;
color: #bbb;
position: relative;
}
</style> </style>