我这的需求是上传三张图片之后就不显示上传按钮,如果移除了某一张图片上传按钮继续展示
这里是通过动态的class来变化的
<el-upload
v-if="state.fileHandleList.length == 0"
:action="global.Global + '/sysoss/upload'"
:class="{
uoloadSty: state.showHandleImg,
disUoloadSty: state.noneHandleUrl,
}"
list-type="picture-card"
:limit="3"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:headers="headerObj"
:before-upload="beforeUploadImg"
:on-success="handleImageSuccess"
:data="filePath"
:on-exceed="handleExceed"
:on-change="imgHandleChange"
>
<el-icon><Plus /></el-icon>
</el-upload>
<el-upload
v-else
:action="global.Global + '/sysoss/upload'"
:class="{
uoloadSty: state.showHandleImg,
disUoloadSty: state.noneHandleUrl,
}"
list-type="picture-card"
:limit="3"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:headers="headerObj"
:before-upload="beforeUploadImg"
:on-success="handleImageSuccess"
:data="filePath"
:on-exceed="handleExceed"
:on-change="imgHandleChange"
>
<el-icon><Plus /></el-icon>
</el-upload>
<style>
.uoloadSty .el-upload--picture-card {
width: 100px;
height: 100px;
line-height: 100px;
}
.disUoloadSty .el-upload--picture-card {
display: none; /* 上传按钮隐藏 */
}
</style>
下面是让css动态起来的方法
// 处理-上传图片-------------------------showHandleImg noneHandleUrl 控制的显示隐藏------------
const handlePictureCardPreview = (file, fileList) => {
dialogImageUrl.value = file.response.data.url;
state.dialogVisible = true;
};
const imgHandleChange = (file, fileList) => {
state.noneHandleUrl = fileList.length >= state.limitHandleUrl;
};
const handleExceed = (res, file) => {
ElMessage.error("最多上传三张图片");
};
const handleRemove = (file, fileList) => {
state.noneHandleUrl = fileList.length >= state.limitHandleUrl;
let arr = fileList.map((item) => {
return item.response.data.url;
});
handleForm.handle_pic = arr;
};
const beforeUploadImg = (file) => {
const isImg = /^image\/(jpeg|png|jpg)$/.test(file.type);
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isImg) {
ElMessage({
message: "上传图片格式不对哦",
type: "warning",
});
return false;
}
if (!isLt2M) {
ElMessage({
message: "上传图片大小不能超过 2MB!",
type: "warning",
});
return false;
}
return isImg && isLt2M;
};
const handleImageSuccess = (res, fileList) => {
// console.log(res, "file");
//上传成功之后放到囊中
handleForm.handle_pic.push(res.data.url);
ElMessage.success("上传成功");
};