装elemnetUI中用户头像上传

组件.vue

在使用的时候，入股想出现边框。要自己在添加一个类哈

自己还有在添加一个哈 
  .avatar-uploader {
      border:1px solid red;
      width: 178px;
      height: 178px;
  }
           

组件开始

<!-- 参数讲解一下
            action             是上传服务器的地址
            show-file-list	   是否显示已上传文件列表  true时，当成功时，下面会显示上传的文件名和成功的标识。最好为false
            :on-success="handleAvatarSuccess"  上传成功时的钩子函数
            :before-upload="beforeAvatarUpload"  上传之前对图片做的一些处理
            imageUrl  图片显示的地址
         -->

        <el-upload
        class="avatar-uploader"
        :action="uploadOption.url"
        :show-file-list="false"
        :on-success="handleAvatarSuccess"
        :before-upload="beforeAvatarUpload">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>

           

<script>
    export default {
        data(){
            return{
                imageUrl: ''
            }
        },
        props:{
            uploadOption:{
                type:Object,
                required: true
            }

        },
        methods: {
            handleAvatarSuccess(res, file) {
                this.imageUrl = URL.createObjectURL(file.raw);
                this.$emit('upload',[res,file,this.imageUrl])
            },
            beforeAvatarUpload(file) {
                this.$emit('beupload',[file])
            }
        }
    }
</script>
           

<style  scoped>
  /* 自己还有在添加一个哈 */
  .avatar-uploader {
      border:1px solid red;
      width: 178px;
      height: 178px;
  }

  /*  */
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
           

使用组件

<!-- 上传 -->
      <upload :uploadOption="uploadOption"
               @upload="haha"
               @beupload="opop"
      ></upload>
           

data中的数据
 uploadOption:{
      url:"https://jsonplaceholder.typicode.com/posts/"
 }


 methods:{
            haha(mess){
                console.log(mess);
            },
            opop(mess){
                console.log(mess);

            }
        }
           

我们公司正在寻找前端和后端，感兴趣的小哥哥或者小姐姐可以私聊我

如果你是大佬，请带我们飞

如果你是菜鸟，我们带你飞

仅限成都

作者：明月人倚楼

出处：https://www.cnblogs.com/IwishIcould/

想问问题，打赏了卑微的博主，求求你备注一下的扣扣或者微信；这样我好联系你；(っ•̀ω•́)っ✎⁾⁾！

如果觉得这篇文章对你有小小的帮助的话，记得在右下角点个“推荐”哦，或者关注博主，在此感谢！

万水千山总是情，打赏5毛买辣条行不行，所以如果你心情还比较高兴，也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾！

支付宝

微信

本文版权归作者所有，欢迎转载，未经作者同意须保留此段声明，在文章页面明显位置给出原文连接

如果文中有什么错误，欢迎指出。以免更多的人被误导。