vue中el-upload组件如何实现非空校验
时间: 2023-11-06 16:41:54 浏览: 59
在el-upload组件的属性中添加:before-upload方法,该方法会在上传文件之前执行,可以在该方法中通过返回false来取消上传。可以利用该方法进行非空校验,具体实现方式如下:
<el-upload
action="/upload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-upload="beforeUpload"
>
<el-button slot="trigger" type="primary">上传文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件,且不超过500kb</div>
</el-upload>
methods: {
beforeUpload(file) {
if (!file) {
this.$message({
type: 'error',
message: '请选择文件'
})
return false
}
return true
},
handlePreview(file) {
console.log('preview', file)
},
handleRemove(file, fileList) {
console.log('remove', file, fileList)
}
}
相关问题
vue element el-upload
vue element el-upload 是 Vue 开发中常用的一个功能,它是 Element 组件库提供的上传组件。el-upload 组件有多种用法和配置选项,可以根据需要进行设置和使用。例如,可以通过指定 action 属性来设置上传文件的接口地址,通过设置 accept 属性来限制上传的文件类型,通过设置 multiple 属性来实现多文件上传等。同时,el-upload 组件还提供了一些事件和方法,可以方便地处理上传过程中的各种情况,例如上传成功、上传失败、上传前的校验等。
在基本用法中,可以将 el-button 放在 el-upload 组件内部,通过点击按钮来触发上传操作。在上传过程中,可以展示已上传的文件列表,并且可以方便地删除已上传的文件,以便上传新的文件。
在需要同时提交数据给后台接口的情况下,可以使用 data 属性来传递额外的数据。通过设置 before-upload 属性,可以在上传之前进行一些操作,例如对上传文件进行限制或校验。同时,可以通过设置 on-success 和 on-error 属性来处理上传成功和上传失败的情况。
总的来说,vue element el-upload 是一个功能强大且易于使用的上传组件,可以满足大部分前端开发中的文件上传需求。
vue el-upload校验
对于vue的el-upload组件,可以通过设置before-upload属性来进行校验。before-upload属性接收一个函数,该函数会在上传文件之前被调用,如果返回false,则取消上传操作,如果返回true或者Promise.resolve(true),则继续上传操作。
在before-upload函数中,可以进行各种校验操作,例如文件类型、文件大小、文件数量等等。以下是一个示例代码:
```
<el-upload
class="upload-demo"
action="/upload"
:before-upload="beforeUpload">
<el-button slot="trigger">选取文件</el-button>
<el-button style="margin-left: 10px;" type="primary">上传到服务器</el-button>
</el-upload>
<script>
export default {
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg'
const isLt2M = file.size / 1024 / 1024 < 2
if (!isJPG) {
this.$message.error('上传图片只能是 JPG 格式!')
}
if (!isLt2M) {
this.$message.error('上传图片大小不能超过 2MB!')
}
return isJPG && isLt2M
}
}
}
</script>
```
在上面的示例代码中,beforeUpload函数会先判断文件类型是否为JPG格式,如果不是,则弹出错误提示;然后再判断文件大小是否小于2MB,如果不是,则同样弹出错误提示。最后,如果文件类型和大小都符合要求,则返回true,允许上传操作。