el-upload 在弹框中上传组件再次打开会闪现之前的文件

最新推荐文章于 2024-02-29 20:16:57 发布

前端路上迷茫的小鲨鱼

最新推荐文章于 2024-02-29 20:16:57 发布

阅读量1k

点赞数 4

分类专栏： element vue 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/Guoyu1_/article/details/125337754

版权

vue 同时被 2 个专栏收录

95 篇文章 0 订阅

订阅专栏

element

44 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Element UI的el-upload组件结合CSS样式，实现头像上传限制、显示尺寸调整以及上传状态管理。重点讲解了`.diaForm`中针对`.avatar`和`.limit`的选择器，以及上传前验证和事件处理方法。

摘要由CSDN通过智能技术生成

.diaForm{
  .el-form-item {
    &.limit {
      .el-upload--picture-card {
        display: none;
      }
    }
    &.avatar {
      .el-upload--picture-card {
        width: 140px;
        height: 140px;
        line-height: 140px;
      }
      .el-upload-list__item {
        width: 140px;
        height: 140px;
      }
    }
    .el-upload-list__item {
      transition: none !important;
    }
    ::v-deep .el-upload-list__item { transition: none !important;}
    .el-upload-list__item.is-ready {
      display: none;
    }
  }
}

<el-form-item
  prop="avatar"
  label="头像："
  class="avatar"
  :class="{limit: hideUploadIcon}">
  <el-upload
    list-type="picture-card"
    :limit="1"
    :action="imageUrl"
    :file-list="avatarList"
    :before-upload="beforeImageUpload"
    :on-success="uploadAvatarSuccess"
    :on-change="handleAvatarChange"
    :on-remove="handleAvatarRemove">
    <i class="el-icon-plus avatar-uploader-icon"></i>
  </el-upload>
</el-form-item>

 hideUploadIcon: false,
 avatarList: [],
 imageUrl: process.env.VUE_APP_BASE_API + 'api/Oss/UploadFile',

// 详情方法
this.avatarList = res.response.avatar ? [{url: res.response.avatar}] : []
this.hideUploadIcon = this.avatarList.length > 0

beforeImageUpload(file) {
  const isImage = file.type.includes('image/');
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isImage) {
    this.$message.error('只能上传图片文件!');
  }
  // if (!isLt2M) {
  //   this.$message.error('上传头像图片大小不能超过 2MB!');
  // }
  return isImage
},

// 上传图
uploadAvatarSuccess(res) {
  this.$set(this.formData, 'avatar', res.response)
},
// 删除图
handleAvatarRemove(file, fileList) {
  this.hideUploadIcon = fileList.length >= 1
  this.$set(this.formData, 'avatar', '')
},
// 监听图的上传事件
handleAvatarChange(file, fileList) {
  this.hideUploadIcon = fileList.length >= 1
},