博客

先上图：

测试今天给提了一个建议，想让上传图片达到限制之后就不展示后面的上传框，看了眼官网的例子：

发给他之后让他选一个我照做，可是需求那边又想要既展示查看删除图标（也就是下面的），又想要不展示上传框（也就是上面的），好吧，直接手动改造一下下面照片墙的情况：

看代码：

<!-- 给上传组件绑定一个动态class，用来隐藏上传框 -->

<el-upload
  ref="elUploadTag"
  :action="TagAction"
  :headers="myHeaders"
  :limit="1"
  list-type="picture-card"
  :multiple="false"
  :on-preview="handlePreviewTag"
  :on-remove="doAfterRemovedTag"
  :before-upload="doBeforeUploadTag"
  :on-exceed="onExceedTag"
  :on-success="doAfterUploadTag"
  :file-list="fileListTag"
  :class="listLengthTag === 1?'hide_box':''"
>
  <i class="el-icon-plus"></i>
</el-upload>

//在data中定义变量listLengthTag = 0

data() {
  return {
    // 用来判断是否展示上传框
    listLengthTag: 0
  };
},

//在on-remove绑定的函数中给listLengthTag实时赋新值

doAfterRemovedTag(file, fileList) {
  this.TagForm.logo = null;
  // 删除图片把当前图片列表的length赋值给listLength
  this.listLengthTag = file.length
}


//在on-success绑定的函数中给listLengthTag实时赋新值

doAfterUploadTag(resData, file, fileList) {
  if (resData.code === 200) {
    this.TagForm.logo = resData.data.id;
    this.$refs.TagForm.validateField("logo");
    // 图片上传成功赋值当前列表length
    this.listLengthTag = fileList.length
  }
}

//在style中编写隐藏上传框的效果

<style lang="scss" scoped>
.hide_box{
  ::v-deep.el-upload--picture-card{
    display: none;
  }
}
</style>

看效果：

最后，若上传图片在弹窗中或是新的页面中，关闭弹窗以及离开页面记得把listLengthTag重新赋值为0

前端小白积累经验篇~