这个el-upload我是真的没有整明白,如果我想实现使用图一这样一个框,然后点击就可以上传头像并且触碰就可以像第二张图一样,然后点击删除图标再回到第一张图这样的一个需求,在elment的upload里面完全找不到怎么实现,要么就是上传完再给你放一个图一要么就是删除不行
查阅了很多资料,确实解决了上传之后不再显示一个图一的方法,但是删除功能解决的还是太麻烦了,解决方案不但要绑定一个List,还要去管理你定义的这个List,直接给大家放我的解决方案吧
(这个动图咋这么快啊......)
1.组件方面
使用的是这个,主要是因为这个class="upload_demo"和list-type="picture-card",代码有很多重复没有必要看的地方,可以直接后面总结的关键点
显示图片就按照这个组件说明就可以显示
<!-- 上传头像 -->
<el-upload
action="#"
ref="upload_attach"
class="upload_demo"
:class="{ 'none-up': uploadDisabled }"
list-type="picture-card"
:before-upload="beforeUpload"
:on-remove="handleRemove"
:http-request="uploadFile"
>
<el-icon><Plus /></el-icon>
<template #file="{ file }">
<div>
<img
class="el-upload-list__item-thumbnail"
:src="file.url"
alt=""
/>
<span class="el-upload-list__item-actions">
<span
class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)"
>
<el-icon><zoom-in /></el-icon>
</span>
<span
class="el-upload-list__item-delete"
@click="$refs.upload_attach.handleRemove(file)"
>
<el-icon><Delete /></el-icon>
</span>
</span>
</div>
</template>
</el-upload>
<!-- 头像放大展示 -->
<el-dialog v-model="imgDialog">
<img w-full :src="dialogImageUrl" alt="Preview Image" />
</el-dialog>
2.基础部分
//el-upload的关键属性
ref="upload_attach"
:class="{ 'none-up': uploadDisabled }"
:on-remove="handleRemove"
//上传用户头像涉及的变量
let fileList = reactive([]); //文件列表
let uploadDisabled = ref(false); //如果多于一个就不显示控件
这些是必要的
虽然我定义了一个fileList,但是可以看到我根本没有绑定,所以这个List就是一个判断用的,不需要自己维护,可以继续看后面
3.实现上传后不再出现一个新的上传框
// 上传头像
const uploadFile = async (item) => {
//上传头像的处理,上传图片list里面东西就+1,大于等于1就开启判断css
fileList.push({ item });
uploadDisabled.value = fileList.length >= 1 ? true : false;
};
//样式
.none-up :deep(.el-upload--picture-card) {
display: none;
}
到这里就可以实现通过样式控制不出现新的上传框
4.实现删除功能
这个真的挺离谱的,用这个感觉就是要去分析源码,但是!
//首先这里的事件要像我这样绑定到el-upload的handleRemove,照抄即可
//记得给父组件加一个ref="upload_attach",注意基础部分
<span
class="el-upload-list__item-delete"
@click="$refs.upload_attach.handleRemove(file)"
>
<el-icon><Delete /></el-icon>
</span>
//关键点!!!
//删除图片
const handleRemove = () => {
//清空list
fileList = [];
//让原本的样式生效!
uploadDisabled.value = false;
};
这里详细讲一下,虽然只有三行关键代码,甚至也可以不让fileList置空,置空...感觉干净点吧
点击删除之后调用了父组件的删除,让上传了图片的框消失,正常的话组件直接就没了,但是通过让原本隐藏的样式生效就又实现了再多一个框。
可以不让fileList置空是因为,每次上传图片就会走上面第三步的函数,然后每次走判断,fileList长度每次上传都会+1,所以这个List一直都是大于1,建议亲自尝试加深理解
这样就使用这么一行代码解决了删除!