对elment-UI的上传组件进行一次简易封装,对上传的文件进行限制。
限制:
1. 限制上传文件的后缀
2. 限制上传文件名长度
3. 限制上传文件大小
子组件
<template>
<el-upload
ref="upload"
:limit="limit"
:accept="accept"
action=""
:before-upload="handelCheckFile"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:on-exceed="handleExceed"
:file-list="fileList"
:http-request="uploadFile">
<el-button size="small" type="primary">{{buttonName}}</el-button>
<div slot="tip" class="el-upload__tip">{{message}}</div>
</el-upload>
</template>
使用父组件传递进来的条件,对上传文件进行限制
export default {
props: {
buttonName: {
type: String,
default: '选取文件'
},
message: {
type: String,
default: ''
},
accept: {
type: String,
default: ".jpg, .png"
},
limit: {
type: Number,
default: 1
},
fileSize: {
type: String,
default: '1M'
},
fileNameRule: {
type: Object,
default: () => {
return {
rule: /\w{1, 50}/g,
error: '文件名长度不饿能超过50个字符'
}
}
}
},
data(){
return {
fileList: []
}
},
methods: {
uploadFile(info){
console.log(info)
this.$emit('store-local', info.file)
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handlePreview(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning('超过可上传的最大文件数量');
},
beforeRemove(file, fileList) {
},
handelCheckFile(file){
const FileExt = file.name.replace(/.+\./, '')
if(this.accept.toLowerCase().indexOf(FileExt.toLowerCase()) === -1){
this.$message.error('请上传后缀名为' + this.accept + '的文件!')
return false
}
// 文件名校验
const reg = this.fileNameRule.rule
const name = file.name.split('.')
if(reg.test(name)){
this.$message.warning(this.fileNameRule.error)
return false
}
// 文件大小
let numberStr = ''
let unitStr = ''
this.fileSize.split('').forEach(item => {
if(!isNaN(Number(item))){
numberStr = numberStr + item + ''
}else{
unitStr = unitStr + item
unitStr = unitStr.toLowerCase()
}
})
let totalSize = file.size
let errMessage = ''
switch(unitStr){
case 'm': case 'mb':
totalSize = file.size / 1024 / 1024
break
case 'k': case 'kb':
totalSize = file.size / 1024
break
case 'g': case 'bg':
errMessage = '暂不接受gb级别的文件上传!'
break
}
const isOverSize = totalSize > Number(numberStr)
const sizeZero = totalSize === 0
if(errMessage){
this.$message.warning(errMessage)
return false
}else if(isOverSize){
this.$message.warning('文件大小超过' + this.fileSize + '!')
return false
}else if(sizeZero){
this.$message.warning('文件无内容!')
return false
}
// 添加文件
this.fileList.push(file)
}
}
}
父组件
在模板块中将参数传递给子组件
<template>
<div>
<upload :buttonName="buttonName" :limit="limit" :message="message"
:file-size="fileSize" @store-local="storeLocal"></upload>
<el-button @click="showData">show data</el-button>
</div>
</template>
将上传文件条件传递给子组件,上传到本地后将文件进行回传给父组件,等待上传给服务器
import upload from "@/views/tools/components/upload.vue"
export default {
name: 'UploadTest',
components: { upload },
data(){
return {
files: [],
accept: '.jpg',
message: '只能上传.jpg格式的文件',
buttonName: '文件上传',
limit: 5,
fileSize: '20M',
}
},
methods: {
storeLocal(file){
this.files.push(file)
},
showData(){
console.log(this.files)
}
}
}