裝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毛買辣條行不行，是以如果你心情還比較高興，也是可以掃碼打賞部落客(っ•̀ω•́)っ✎⁾⁾！

支付寶

微信

本文版權歸作者所有，歡迎轉載，未經作者同意須保留此段聲明，在文章頁面明顯位置給出原文連接配接

如果文中有什麼錯誤，歡迎指出。以免更多的人被誤導。