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"

可能有什么不对？我在哪里可以得到一个好的和最近的例子，将这样的文件上传到我的服务器后端静态文件目录？

感谢更新

Answer 1

似乎是一个尚未用bootstrap-vue解决的问题

Custom input file after choice file nothing change.

Vue.js表单文件输入事件处理程序中的错误

1 个答案: