https://blog.csdn.net/weixin_38659265/article/details/89447469
elementUI+Vue 验证上传文件的类型
https://www.jianshu.com/p/49e90bea086c
1)嵌入组件知滚橘
2）第一搭团种文件类型校验
直接在el-upload中加上下面这一行就好，这适用于文件类型比较常见的，文件类型可选择性比较少时
3）第二种适用与校验文件类型比较多时，可以在beforeUpload方法中进行过滤：
4）文件大小校验
可备敬以在beforeUpload方法中进行过滤：
5）beforeRemove方法中需要把不符合大小的文件自动移除
<el-uploadref="uploadRef"//给上传文件绑脊消没定一个ref必要时好清空上传文件数组
style="margin-left:10px"
:limit="limitNum" //限制上传文件个数 这里我一个对象来代替
action="" // 上传地桥清址
multiple
:auto-upload="false" //自动上传文件
:show-file-list="false" //是否显示上传信息列表
class="upload-demo"// 关闭前的验证
:before-upload="beforeUploadFile"//上传前的验证
:on-exceed="exceedFile" //超出上传个数的验证
:on-change="fileChange" //上传文件发生改变时触发change事件
>
<el-button slot="trigger" type="primary">导入文件</el-button>
</el-upload>
——-----------------------------------------------------------------------------------------
fileChange(file, fileList) {
this.beforeUploadFile(file)
if (this.beforeUploadFile(file)) {
this. refs.uploadRef.clearFiles() //清空上传列表里面的数据
}
}
exceedFile(files, fileList) {
this. {this.limitNum} 个文件，当前共选择了 ${files.length + fileList.length} 个`)
}
beforeUploadFile(file) {
const isLt5M = file.size / 1024 / 1024 <10
if (this.allowType.indexOf(file.name.substring(file.name.lastIndexOf('.') + 1)) === -1) {
this. {this.allowTypeTips} 格式!`
})
return false
}
if (!isLt5M) {
this.$message.error({ title: '系统提示', message: '上传文件大樱纳小不能超过 10MB!' })
return false
} else {
return true
}
}
uploadFile() {
if (this.fileList.length === 0) {
this. message.success({ title: '系统提示', message: '上传成功' })
this.fileList = []
} else {
this.$message.error({ title: '系统提示', message: '上传失败' })
}
})
}
},
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）