vue3.0+plus上传图片后隐藏上传图标

我这的需求是上传三张图片之后就不显示上传按钮,如果移除了某一张图片上传按钮继续展示
这里是通过动态的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("上传成功");
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值