vue+elementui 上传文件时限制上传文件的类型和大小
- 重点属性–
:before-upload="beforeAvatarUpload"
html代码:
<el-upload class="upload-demo"
ref="upload1"
:action="baseUrl+'/module/v1/manage/'"
:data="{optype:'1',productid:this.formInline.productidDetails,
modulename:this.formInline.modulenameDetails,desc:this.formInline.descDetails,
username:this.updateuser,moduleid:this.moduleidDetails}"
:file-list="fileList1"
:before-upload="beforeAvatarUpload"
:auto-upload="false">
<el-button slot="trigger"
size="small"
type="">选取文件</el-button>
<div slot="tip"
style="width: 260px;"
class="el-upload__tip">只能上传excel格式文件,文件不能超过500kb</div>
</el-upload>
js代码:
beforeAvatarUpload1 (file) {
var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
const extension3 = testmsg === 'xlsx'
this.extension3 = extension3
const extension4 = testmsg === 'xls'
this.extension4 = extension4
const isLt2M1 = file.size / 1024 < 500
this.isLt2M1 = isLt2M1
if (!this.extension3 && !this.extension4) {
this.$message({
message: '上传文件只能是excel格式!',
type: 'warning'
});
}
if (!isLt2M1) {
this.$message({
message: '上传文件大小不能超过 500kB!',
type: 'warning'
});
}
return this.extension3 || this.extension4 && isLt2M1
},
又是打工的一天,欢迎大家私信提建议~~~