74 lines
1.7 KiB
Vue
74 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<el-upload
|
||
|
|
ref="uploadFile"
|
||
|
|
:auto-upload="false"
|
||
|
|
:file-list="fileList"
|
||
|
|
:on-change="onChange"
|
||
|
|
: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">{{ '文件大小不超过'+fileSize +'MB' }}</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: 200
|
||
|
|
},
|
||
|
|
accept: {
|
||
|
|
type: String,
|
||
|
|
default: ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
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) {
|
||
|
|
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)
|
||
|
|
},
|
||
|
|
handleExceed(files, fileList) {
|
||
|
|
this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
<style scoped>
|
||
|
|
</style>
|