vue element上传成功后 怎么去除提示请上传文件的提示信息
时间: 2024-03-12 11:43:57 浏览: 59
你可以利用 `before-upload` 和 `on-success` 事件来控制上传成功后的提示信息。具体实现可以参考以下代码:
```
<template>
<el-upload
class="upload-demo"
:action="uploadUrl"
:before-upload="beforeUpload"
:on-success="onUploadSuccess"
:file-list="fileList"
:auto-upload="false"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<el-button style="margin-left: 10px;" size="small" type="success" @click="uploadFiles">上传文件</el-button>
<div slot="tip" class="el-upload__tip">只能上传 jpg/png 文件,且不超过 500kb</div>
</el-upload>
</template>
<script>
export default {
data() {
return {
uploadUrl: 'your_upload_url',
fileList: []
}
},
methods: {
beforeUpload(file) {
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
const isLt500K = file.size / 1024 < 500
if (!isJPG || !isLt500K) {
this.$message.error('上传文件格式不正确或文件大小超过 500KB')
return false
}
return true
},
onUploadSuccess(response, file, fileList) {
// 处理上传成功后的逻辑
console.log('上传成功:', response)
},
uploadFiles() {
this.$refs.upload.submit()
}
}
}
</script>
```
在上面的代码中,`before-upload` 方法用于校验上传文件的格式和大小,如果校验不通过,则会显示错误提示信息。在 `on-success` 方法中,你可以对上传成功后的响应数据进行处理,并在这个方法中控制提示信息的展示。最后,通过点击“上传文件”按钮来调用 `uploadFiles` 方法实现手动上传文件。
阅读全文