ElementUI实现el-upload单图上传

最新推荐文章于 2025-03-21 11:38:18 发布

IsHuanli

最新推荐文章于 2025-03-21 11:38:18 发布

阅读量5.7k

点赞数 1

分类专栏： vue项目 ElementUI 文章标签： elementui vue.js 前端

本文链接：https://blog.youkuaiyun.com/qq_44171586/article/details/123288469

版权

vue项目同时被 2 个专栏收录

7 篇文章

订阅专栏

ElementUI

1 篇文章

订阅专栏

本文介绍了在ElementUI中实现头像单图上传的方法，包括两种解决方案：通过设置样式隐藏上传框以及使用特定CSS代码来阻止多图上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

头像上传

上传图片的时候遇到该上传的图片应该是单图上传的，比如头像。如果想要上传一张图片之后就不让上传了，这时候应该咋办？

单图上传的两种解决方法

为啥是两种，因为我目前只会两种。。。

第一种：

<el-upload 
     action="#"
     :class="{disabled:uploadDisabled}"
     list-type="picture-card" 
     :http-request="httpRequest"
     :on-preview="handlePictureCardPreview" 
     :before-upload="beforeAvatarUpload" 
     :on-remove="handleRemove"
     :on-change="handleChange" 
     :file-list="imglist">
     <i class="el-icon-plus"></i>
</el-upload>

computed: { 
    uploadDisabled:function() {
         return this.imglist.length>0;
    },
}

如果要隐藏上传的框则设置style为：

（如果是向我一样<style lang="less" scoped>的话一定记得加/deep/，不然效果出不来。）

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

第二种：

<el-form-item label="头像" prop="userpic">
<el-upload 
    action="#"
    :class="{disabled:uploadDisabled}"
    :limit="1"
    list-type="picture-card" 
    :http-request="httpRequest"
    :on-preview="handlePictureCardPreview" 
    :before-upload="beforeAvatarUpload" 
    :on-remove="handleRemove"
    :on-change="handleChange" 
    :file-list="imglist">
    <i class="el-icon-plus"></i>
</el-upload>
</el-form-item>

computed: {
   uploadDisabled:function() {
        //this.ruleForm.userpic为表单prop的数据
         return this.ruleForm.userpic !='';
   },
},

如果要隐藏的话，同上设置css代码~