Como colocar o avatar com file

Dados pessoais

<b-form>
  <b-row>
    <b-col>
      <b-form-group sm="6">
           <b-avatar class="align-center" button @click="onClick" size="10rem">
                <b-form-file id="foto">
                </b-form-file>
           </b-avatar> 
      </b-form-group>
    </b-col>
  </b-row>
  <b-row cols="4">
    <b-col md="3" class="ml-md-auto p-3 ">
      <b-form-group label="Nome:" label-for="nome">
        <b-form-input type="text" id="nome" v-model="item.nome" placeholder="Digite seu nome">
        </b-form-input>
      </b-form-group>
    </b-col>
    <b-col md="3" class="ml-md-auto p-3 ">
      <b-form-group label="Sobrenome:" label-for="sobrenome">
        <b-form-input type="text" id="nome" v-model="item.sobrenome" placeholder="Digite seu sobrenome">
        </b-form-input>
      </b-form-group>
    </b-col>
    <b-col md="3" class="ml-md-auto p-3 ">
      <b-form-group label="Sexo" label-for="sexo">
        <b-form-select id="sexo"></b-form-select>
      </b-form-group>
    </b-col>
    <b-col md="3" class="ml-md-auto p-3 ">
      <b-form-group label="Data de nascimento:" label-for="dataDeNascimento">
        <b-form-input type="date" id="dataDeNascimento" v-model="item.dataNascimento"
          placeholder="Insira a data de nascimento do paciente">
        </b-form-input>
      </b-form-group>
    </b-col>
  </b-row>
  <b-row cols="4">
    <b-col md="3" class="ml-md-auto p-3 ">
      <b-form-group label="Idade" label-for="idade">
        <b-form-input id="idade" disabled></b-form-input>
      </b-form-group>
    </b-col>
    <b-col md="3" class="ml-md-auto p-3 ">
      <b-form-group label="Estado Civil" label-for="estadoCivil">
        <b-form-select id="estadoCivil"></b-form-select>
      </b-form-group>
    </b-col>
    <b-col md="3" class="ml-md-auto p-3 ">
      <b-form-group label="Escolaridade" label-for="escolaridade">
        <b-form-select id="escolaridade"></b-form-select>
      </b-form-group>
    </b-col>
    <b-col md="3" class="ml-md-auto p-3 ">
      <b-form-group label="Raça" label-for="raca">
        <b-form-select id="raca"></b-form-select>
      </b-form-group>
    </b-col>
    <!--<b-col md="6" sm="12">
      <b-form-group label="Foto" label-for="foto">
        <b-form-file
          id="foto"
          placeholder="Insira a foto do paciente"
        ></b-form-file>
      </b-form-group>
    </b-col>-->
  </b-row>
  <b-row cols="12">
    <b-col class="text-center">
      <b-button @click="Criar" variant="primary">Enviar</b-button>
      &nbsp;
      <b-button type="reset" variant="danger">Limpar</b-button>
    </b-col>
  </b-row>
</b-form>