91 lines
2.1 KiB
Vue
91 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-upload
|
||
|
|
ref="uploadFile"
|
||
|
|
:auto-upload="false"
|
||
|
|
:file-list="fileList"
|
||
|
|
:on-change="onChange"
|
||
|
|
:on-remove="onRemove"
|
||
|
|
:limit="limit"
|
||
|
|
:on-exceed="handleExceed"
|
||
|
|
:accept="accept"
|
||
|
|
action="#">
|
||
|
|
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
|
||
|
|
<div slot="tip" class="el-upload__tip">{{ info }}</div>
|
||
|
|
</el-upload>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
name: 'UploadImg',
|
||
|
|
props: {
|
||
|
|
// 文件列表
|
||
|
|
fileList: {
|
||
|
|
type: Array,
|
||
|
|
default() {
|
||
|
|
return []
|
||
|
|
}
|
||
|
|
},
|
||
|
|
// 文件限制数量
|
||
|
|
limit: {
|
||
|
|
type: Number,
|
||
|
|
default: 1
|
||
|
|
},
|
||
|
|
// 文件大小
|
||
|
|
fileSize: {
|
||
|
|
type: Number,
|
||
|
|
default: 500
|
||
|
|
},
|
||
|
|
// 接受类型
|
||
|
|
accept: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
},
|
||
|
|
// 错误提示信息
|
||
|
|
info: {
|
||
|
|
type: String,
|
||
|
|
default: '文件大小不超过500MB'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dialogImageUrl: '',
|
||
|
|
dialogVisible: false,
|
||
|
|
disabled: false
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleRemove(file) {
|
||
|
|
this.fileList.splice(this.fileList.findIndex(item => item.uid === file.uid), 1)
|
||
|
|
},
|
||
|
|
handlePictureCardPreview(file) {
|
||
|
|
this.dialogImageUrl = file.url
|
||
|
|
this.dialogVisible = true
|
||
|
|
},
|
||
|
|
onChange(file, fileList) {
|
||
|
|
if (!file) {
|
||
|
|
this.$message.error('请上传文件')
|
||
|
|
return
|
||
|
|
}
|
||
|
|
this.file = file
|
||
|
|
this.file_name = file.name
|
||
|
|
const isLt2M = file.size / 1024 / 1024 < this.fileSize
|
||
|
|
if (!isLt2M) {
|
||
|
|
this.$message.error('上传视频大小不能超过 ' + this.fileSize + 'MB!')
|
||
|
|
this.$refs.uploadFile.clearFiles()
|
||
|
|
return false
|
||
|
|
}
|
||
|
|
this.$emit('update:fileList', fileList)
|
||
|
|
},
|
||
|
|
onRemove(file, fileList) {
|
||
|
|
this.$emit('update:fileList', fileList)
|
||
|
|
},
|
||
|
|
handleExceed(files, fileList) {
|
||
|
|
this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
</style>
|