<template>
|
<div class="upload-wrap">
|
<el-dialog
|
title="上传文件"
|
:visible.sync="dialogVisible"
|
width="600px"
|
:close-on-click-modal="false"
|
v-dialogDrag>
|
<div class="upload-file">
|
<el-upload
|
action="/tssw/api/upload"
|
class="upload-demo upload-file-box"
|
ref="upload"
|
:before-upload="beforeFileUpload"
|
:on-success="handleUploadSuccess"
|
:data="{type:type}"
|
:on-change="changeFile"
|
:file-list="fileList"
|
:auto-upload="false">
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
<div slot="tip" class="el-upload__tip">只能上传 xlsx/xls 格式的文件，且不超过2M</div>
|
</el-upload>
|
</div>
|
<div class="sumbMit-Btn">
|
<el-button size="small" type="primary" plain @click="submitBtn">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
import {upload} from '@/api/daping'
|
export default {
|
name: "uploadForm",
|
data() {
|
return {
|
dialogVisible: false,
|
fileList:[{
|
name:'xxx',
|
url: ''
|
}],
|
type:''
|
}
|
},
|
methods: {
|
init(type) {
|
this.dialogVisible = true
|
this.$nextTick(() => {
|
this.$refs.upload.clearFiles()
|
this.type = type
|
})
|
|
},
|
submitBtn() {
|
if(this.fileList.length>0) {
|
this.$refs.upload.submit()
|
}else {
|
this.$message({
|
type: 'info',
|
message: '请先上传附件！'
|
})
|
}
|
},
|
changeFile(file) {
|
let acceptList = ['xlsx']
|
let fileType = file.name.split('.').pop().toLowerCase()
|
if(acceptList.indexOf(fileType) === -1) {
|
this.$message.error('只能上传 xlsx/xls 格式的文件')
|
return false
|
}
|
if(file.size/1024/1024 > 2) {
|
this.$message.error('上传文件不能超过2M！')
|
return false
|
}
|
},
|
handleUploadSuccess(response, file, fileList) {
|
if(response.code == 0) {
|
this.$message.success(response.msg)
|
this.dialogVisible = false
|
}else {
|
this.$message.error(response.msg)
|
this.dialogVisible = false
|
}
|
},
|
beforeFileUpload(file) {
|
if(file.size/1024/1024 > 2) {
|
this.$message.error('上传文件不能超过2M！')
|
return false
|
}
|
let acceptList = ['xlsx','xls']
|
let fileType = file.name.split('.').pop().toLowerCase()
|
if(acceptList.indexOf(fileType) === -1) {
|
this.$message.error('只能上传 xlsx 格式的文件')
|
return Promise.reject(false)
|
}
|
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.upload-wrap{
|
.el-upload--text{
|
border: none!important;
|
width: auto;
|
height: auto;
|
}
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
.upload-file{
|
min-height:0.98rem /* 60/192 */;
|
}
|
.upload-file-box{
|
width: 80%;
|
margin: 0 auto;
|
}
|
.sumbMit-Btn{
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
</style>
|
