本文主要是在原有的el-upload组件的基础上根据业务需求封装的上传组件。
1、引入组件：import DragUpload from '@/components/Upload/VersionDragUpload'
2、注册组件：components: { DragUpload }
3、使用组件：
<drag-upload
class="upload-content"
width="460px"
height="221px"
:file-count-limit="1"
:auto-upload="false"
:file-types="uploadFileTypes"
:file-size-limit="50"
:upload-form="uploadForm"
:upload-status-form="uploadStatusForm"
@upload="clickUploadFile"
@returnList="returnList"
/>
components/Upload/VersionDragUpload.vue
<template>
<el-upload
:disabled="authenStatus === 0 ? false : true"
drag
multiple
action="#"
:file-list="fileList"
:limit="fileCountLimit"
:auto-upload="false"
:accept="fileTypes"
:on-change="onChange"
:on-preview="handlePreview"
:on-remove="handleRemove"
:on-exceed="handleExceed"
:before-remove="beforeRemove"
>
<div v-if="uploadStatusForm.uploadStatus">
<div class="el-upload__text"><h2>{{ uploadStatusForm.uploadTitleText }}</h2></div>
<div class="icon-warp">
<i :class="uploadStatusForm.uploadClass" />
</div>
<div class="el-upload__text">
<template v-if="uploadStatusForm.ifUploadFile">
<el-button type="primary" @click="returnList('return')">返回列表</el-button>
<el-button type="primary" @click="againUpload">{{ uploadStatusForm.continueUploadContent }}</el-button>
</template>
<template v-else>
<el-button type="primary" @click="returnList('cancel')">取消上传</el-button>
</template>
</div>
</div>
<div v-if="uploadStatusForm.uploadFilesStatus" @click="clickUpload">
<i class="el-icon-upload" />
<div class="el-upload__text"><em>请点击上传</em></div>
</div>
<div slot="tip" class="el-upload__tip">请选择有效的文件格式, 建议文件不超过<em style="color:red">100M</em>, 最多上传{{ fileCountLimit }}个</div>
</el-upload>
</template>
\
<script>
import { mapState } from 'vuex'
\
export default {
name: 'Upload',
props: {
fileTypes: {
default: '',
type: String
},
fileCountLimit: {
default: 1,
type: Number
},
fileSizeLimit: {
default: 100,
type: Number
},
uploadForm: {
default: () => {},
type: Object
},
uploadStatusForm: {
default: () => {},
type: Object
}
},
data() {
return {
authenStatus: 0
}
},
computed: {
...mapState({
fileList: state => state.upload.fileList
}),
requiredFileTypes: function() {
return this.fileTypes.split(', ')
}
},
methods: {
submitUpload() {
this.$refs.upload.submit()
},
onChange(file, fileList) {
// var fileType = file.name.substring(file.name.lastIndexOf('.'))
\
// const result = this.requiredFileTypes.indexOf(fileType) === -1
// if (result) {
// // this.$message.warning(`不支持该文件类型!`)
// fileList.pop()
// }
\
const fileSize = file.size / 1024 / 1024
if (fileSize > this.fileSizeLimit) {
// this.$message.warning(`上传文件大小不能超过 ${this.fileSizeLimit} MB!`)
// fileList.pop()
}
this.updateFiles(fileList)
// emit
this.$emit('upload')
},
handleRemove(file, fileList) {
this.updateFiles(fileList)
},
handlePreview(file) {
// console.log(file)
},
handleExceed(files, fileList) {
this.$message.warning(`最多只能同时上传 ${this.fileCountLimit} 个文件！`)
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除${file.name}？`)
},
updateFiles(fileList) {
this.$store.dispatch('upload/updateFiles', fileList)
},
returnList(val) {
this.authenStatus = 1
this.$emit('returnList', val)
},
againUpload() {
this.$store.dispatch('upload/updateFiles', [])
this.authenStatus = 0
},
clickUpload() {
if (this.uploadForm.versionName && this.uploadForm.versionDate) {
this.authenStatus = 0
} else {
this.authenStatus = 1
return this.$message.warning(`请输入必填项`)
}
}
}
}
</script>
<style lang="scss" scoped>
.icon-warp {
width:80px;
height:80px;
font-size:40px;
margin: 0 auto;
color: #67c23a
}
.loadding {
color: #0880ee
}
.errorClass {
color: red
}
</style>
\
