基于最近的项目封装了个基于elementUI的文件上传组件
文件上传组件:
data为需要传给后端的参数
headers传token
<template>
<div class="v-UploadFile">
<el-upload
class="upload"
accept=".xls, .xlsx"
:data="params"
:action="loadUrl"
:headers="token"
:show-file-list='false'
:before-upload="beforeUploadEv"
:on-success="uploadSuccessEv">
<slot></slot>
</el-upload>
<UploadTip :dialogVisible="showUploadModal" :uploadMessage="uploadMessage" @closeUploadTip="closeUploadTip" />
</div>
</template>
<script>
import UploadTip from '@/components/UploadTip'
export default {
name: 'UploadFile',
props: {
loadUrl: {
type: String,
required: true
},
type: String,
flag: String
},
data() {
return {
token: { 'Token': localStorage.getItem('Token') },
params: { 'Token': localStorage.getItem('Token') },
showUploadModal: false,
uploadMessage: ''
}
},
created() {
this.params = this.type ? Object.assign(this.params, { type: this.type }) : this.params
this.params = this.flag ? Object.assign(this.params, { flag: this.flag }) : this.params
},
methods: {
beforeUploadEv(file) {
this.$emit('uploadLoadingEv', true)
let fileType = file.name.split('.')[1]
if (fileType === 'xls' || fileType === 'xlsx') return file
else {
this.$emit('uploadLoadingEv', false)
this.$message.error('上传文件只能是 xls/xlsx 格式!')
return false
}
},
uploadSuccessEv(res) {
this.$emit('uploadLoadingEv', false)
if (res.code === '200' || res.code === '405') {
this.$emit('querySearchLink')
}
this.showUploadModal = true
this.uploadMessage = res.message
},
closeUploadTip() {
this.showUploadModal = false
this.uploadMessage = ''
}
},
components: {
UploadTip
}
}
</script>
<style scoped lang="less">
.v-UploadFile {
display: inline-block;
}
</style>
组价的引用:
<UploadFile :loadUrl="$api.importMark" :flag="'3'" @querySearchLink="searchEv" @uploadLoadingEv="uploadLoadingEv">
<el-button size="small" class="upload-btn">导入</el-button>
</UploadFile>
uploadLoadingEv(loading) {
this.loading = loading
}