vue3 el-upload文件上传隐藏文件列表

vue3 el-upload文件上传隐藏文件列表

一般情况根据官方教程直接使用el-upload上传是会显示一个列表在下面如图：

但有时候需求是在导入后不显示这个列表比如：

这里只有一个导入按钮，点击之后上传文件js显示隐藏内容，不用显示文件列表。

那废话不多说js显示隐藏内容，直接看代码吧：

      // 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()就可以了