elementPlus 如何清空已上传附件

Question

elementui plus 如何清空已上传附件

起因：我在一个弹出框内需要有输入框，以及文件上传组件，文件上传组件是封装后的，封装后的文件上传组件如下
看api文档及百度说是需要绑定ref，后可直接使用clearFiles（）方法，但浏览器报错说：upload.value.clearFiles is not a function

目前的需求就是父组件【弹出框】打开时，需要清空已上传成功的附件信息，麻烦帮忙看看，谢谢了

<template>
    <el-upload class="avatar-uploader" :action="url" :show-file-list="false" :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload" :on-error="errorUpload" list-type="picture-card" :file-list="state.fileList" ref="upload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon">
            <Plus />
        </el-icon>
    </el-upload>
</template>

<script lang="ts" setup>
import { ref, onMounted,watchEffect,reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps } from 'element-plus'
import * as suffix from '@/api/suffix'
const url = suffix.url() + suffix.system() + '/baiduAi/idcard'
const imageUrl = ref('')
const emit = defineEmits(['uploadData'])
const upload = ref()
const state = reactive({
    fileList:[]
})
/**0 正面 2背面 */
const props = defineProps({
    type: {
        type: Number,
        default: 0
    },
    fileId: {
        type: String,
        default: ()=> {return ''}
    }
})

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    state.fileList.push(uploadFile.raw as never)
    console.log(state.fileList)

    if (props.type === 1 && response.data.normal === undefined) {
        ElMessage.error('请传入身份证人像面')
    } else if (props.type === 2 && response.data.reversed_side === undefined) {
        ElMessage.error('请传入身份证国徽面')
    } else {
        imageUrl.value = URL.createObjectURL(uploadFile.raw!)
    }
    emit('uploadData', response, imageUrl.value)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
        ElMessage.error('请上传格式为jpeg/png')
        return false
    } else if (rawFile.size / 1024 / 1024 > 5) {
        ElMessage.error('图片体积最大5M')
        return false
    }
    return true
}

/**上传错误 */
const errorUpload = (error: any) => {
    ElMessage.error(JSON.parse(error['message']).message)
}


watchEffect(()=>{
    console.log('进入监听')
    console.log(upload.value)
    upload.value = {}
    // upload.value.clearFiles()
    // state.fileList = []
})

// onMounted(() => {
//     console.log('文件上传')
//     console.log(imageUrl.value)
//     // upload.value.clearFiles()
//     console.log(fileList.value)
//     // imageUrl.value = ''
//     // imageUrl.value = props.fileId
//     // console.log(props.fileId)
// })
</script>

<style scoped>
.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
}
</style>

Answer 1

这个解决了，还是得监听，不知道为啥用clearFiles方法始终说没有此方法，还是得手动清空

watchEffect(()=>{
    if(!props.bool){
        state.fileList = []
        imageUrl.value = ''
    }
})

Answer 2

你可以在父组件中定义一个变量，在打开弹出框时将该变量设置为true，然后在封装的文件上传组件中使用watchEffect监听该变量的变化，在变量变化时调用upload.value.clearFiles()方法清空已上传的文件。

Answer 3

可以尝试使用以下方法来清空已上传附件：

在上传组件外部使用 ref 指向上传组件，然后调用该组件实例上的 clearFiles 方法来清空已上传附件。

<template>
  <el-upload ref="upload" class="avatar-uploader" :action="url" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-error="errorUpload" list-type="picture-card" :file-list="state.fileList">
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon">
      <Plus />
    </el-icon>
  </el-upload>
</template>

<script>
...
onMounted(() => {
  this.$refs.upload.clearFiles()
})
...
</script>

在上传组件上直接触发 click 事件，然后调用上传组件的 clearFiles 方法来清空已上传附件。

<template>
  <el-upload ref="upload" class="avatar-uploader" :action="url" :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :on-error="errorUpload" list-type="picture-card" :file-list="state.fileList">
    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
    <el-icon v-else class="avatar-uploader-icon" @click="clearFiles">
      <Plus />
    </el-icon>
  </el-upload>
</template>

<script>
...
methods: {
  clearFiles() {
    this.$refs.upload.clearFiles()
  }
}
...
</script>

如上面的方法都不能解决你的问题，可以尝试在上传文件成功后清空组件内部的已上传文件列表

const handleAvatarSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
    state.fileList.push(uploadFile.raw as never)
    console.log(state.fileList)
    if (props.type === 1 && response.data.normal === undefined) {
        ElMessage.error('请传入身份证人像面')
} else if (props.type === 2 && response.data.reversed_side === undefined) {
ElMessage.error('请传入身份证国徽面')
} else {
imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}
emit('uploadData', response, imageUrl.value)
state.fileList = []
}

这样就能在文件上传成功后清空组件内部的已上传文件列表。