vue3 el-upload文件上传隐藏文件列表
一般情况根据官方教程直接使用el-upload上传是会显示一个列表在下面如图:
但有时候需求是在导入后不显示这个列表比如:
这里只有一个导入按钮,点击之后上传文件,不用显示文件列表。
那废话不多说,直接看代码吧:
// template部分
<el-upload
ref="uploadRef"
accept=".docx"
:action="xxx'" // 文件上传接口
:before-upload="handleBeforeUpload"
class="upload-demo"
:limit="1"
:on-error="onErrorFile"
:on-success="onSuccessFile"
>
<el-button type="primary">导入</el-button>
</el-upload>
// js部分
setup() {
const state = reactive({
uploadRef: null
})
// 文件上传前限制只能上传 docx格式的文件
const handleBeforeUpload = (file) => {
const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
const isDocx = fileType === 'docx'
if (!isDocx ) {
ElMessage('只能上传docx格式的文件哦!')
return false
}
return isDocx
}
// 文件上传失败钩子
const onErrorFile = () => {
ElMessage.error('文件上传失败')
state.uploadRef.clearFiles(); //去掉文件列表
}
// 文件上传成功钩子
const onSuccessFile = () => {
ElMessage.success('文件上传成功')
state.uploadRef.clearFiles(); //去掉文件列表
}
return {
...toRefs(state),
handleBeforeUpload ,
onSuccessFile ,
onErrorFile ,
}
}
其实就是拿到el-upload的ref,调用一下clearFiles()就可以了