Dcheng103 2023-01-18 20:45 采纳率: 66.7%
浏览 45
已结题

elementPlus 如何清空已上传附件

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>


  • 写回答

3条回答 默认 最新

  • Dcheng103 2023-01-18 23:13
    关注

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

    
    watchEffect(()=>{
        if(!props.bool){
            state.fileList = []
            imageUrl.value = ''
        }
    })
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

问题事件

  • 系统已结题 1月26日
  • 已采纳回答 1月18日
  • 创建了问题 1月18日

悬赏问题

  • ¥15 Python信息系统tkinter代码错在哪里
  • ¥15 FOR循环语句显示查询超过300S错误怎么办
  • ¥15 个人通讯录管理系统 C语言 程序设计 需要能运行成功的 结构体和数组 Visual C++编译器
  • ¥15 数电设计题 没有设计思路 不知道用什么芯片进行设计 求提供设计思路
  • ¥15 在动态多目标优化问题中,第一幅图展示的是问题DF6的相关定义和绘制的POS和POF图,请问图中公式PS(t)和PF(t)是如何推导的
  • ¥60 先数学建模,接着设计一种优化算法结合案例给出智能仓储四向穿梭车的调度计划
  • ¥15 Errno2:No such file or directory,在当前文件确实没有该图片,怎么解决?
  • ¥15 博世摄像头数据存储的问题(iscsi)
  • ¥15 如何实现对学生籍贯信息管理系统的选择排序
  • ¥15 写一个51单片机的时钟代码