2021-02-04

Element-UI 上传图片一张图片后隐藏上传按钮

环境 ：Vue3、Element-Plus

在写博客项目的时候需要上传文章封面，限制的是只能传一张图片，想着把上传按钮隐藏不再让用户上传。

在网上搜索都是这一个答案，我就参考的这一篇https://blog.csdn.net/weixin_43851769/article/details/89991357

写完之后我遇到了和评论一样的问题 ：上传了图片后，上传按钮消失了，图片也消失了，样式写在scoped中也不行。

自己摸索好长时间，最后是投巧实现了，总结一下。

具体步骤 ：

html代码：

<el-form-item label="文章封面" :label-width="formLabelWidth" class="changeimg">
  <el-upload
    class="avatar-uploader" 
    action="https://jsonplaceholder.typicode.com/posts/"
    list-type="picture-card"
    :on-preview="handlePictureCardPreview"
    :on-remove="handleRemove"
    :on-change="handleChange"
    limit=1
    :auto-upload='false'
    :file-list="fileList">
    <i class="el-icon-plus"></i>
  </el-upload>
  <el-dialog v-model="dialogVisible">
    <img width="100%" :src="dialogImageUrl" alt="">
  </el-dialog>
</el-form-item>

注：添加avatar-uploader类是为了限制< el-upload >的宽高，这里想方便可以写行内样式。

css代码：

<style lang="less">
.changeimg {
  .avatar-uploader {
 	 width: 150px;
  	 height: 150px !important;
   }
}
</style>

设置完宽高后再传图片就是这样的结果，会把上传按钮挤到下面

注：这时我们可以给类avatar-uploader添加 overflow : hidden；

.avatar-uploader {
  width: 150px;
  height: 150px !important;
  overflow: hidden;
}

这样就隐藏了，当删除时上传按钮会再显示。