file-upload - Vue.jsフォームファイル入力イベントハンドラエラー

Question

bootstrap-vue フォーム ファイル コンポーネントを使用してフォームにファイルをアップロードしようとしています

テンプレート

          <b-form-group id="userInputGroup8" label="User Picture:">
            <b-form-file id="userPictureInput" ref="fileinput" @input="userPictureSelected" v-model="userPictureFile" choose-label="Select" accept=".jpg, .png"></b-form-file>
            <br> Selected file : {{ userPictureFile.name }}
          </b-form-group>

ファイルを選択すると、ブラウザに名前が表示されるのですが、入力欄に表示されず、userPictureSelected メソッドを起動してもコンソールにその値が表示されません。

脚本

data () {
  return {
    ...
    userPictureFile: '',
  }
},
 methods: _.extend({}, mapActions(['createUser']), {
   userPictureSelected: () => {
     console.log('Selected: ', this.userPictureFile.name)
   }
}

エラーが発生します

 [Vue warn]: Error in event handler for "input": "TypeError: _this2.userPictureFile is undefined"

何が間違っている可能性がありますか? そのようなファイルをサーバー バックエンドの静的ファイル ディレクトリにアップロードするための適切な最近の例はどこで入手できますか?

更新ありがとう