Vue.js Vuetify文件上载

我有一个使用Vuetify

v-file-input

组件的表单：

  <v-file-input chips multiple label="File(s)" v-model="file.files"></v-file-input>

---

当I

console.log

表单数据时，

files

对象返回一个空对象。如何获取文件数据以将其传递到我的Laravel后端？

使用

change

事件和

FileReader

   <v-file-input chips multiple @change="addFiles()" 
          label="File(s)" v-model="file.files"></v-file-input>

   methods: {
        addFiles(){
            this.files.forEach((file, f) => {

                this.readers[f] = new FileReader();
                this.readers[f].onloadend = (e) => {

                    let fileData = this.readers[f].result
                    let imgRef = this.$refs.file[f]
                    imgRef.src = fileData
                    console.log(fileData)

                    // send to server here...
                }

                this.readers[f].readAsDataURL(this.files[f]);
            })
        },
    },

方法：{
addFiles（）{
this.files.forEach（（文件，f）=>{
this.readers[f]=new FileReader（）；
this.readers[f].onloadend=（e）=>{
让fileData=this.readers[f].result
设imgRef=this.$refs.file[f]
imgRef.src=文件数据
console.log（文件数据）
//发送到这里的服务器。。。
}
this.readers[f].readAsDataURL（this.files[f]）；
})
},
},

---

演示：

我收到以下错误：

uncaughttypeerror:无法读取FileReader上未定义的属性“0”。\u this.readers..onloadend

但它确实像是在工作。为什么我会犯这个错误？我在这一行得到它：

让imgRef=\u this.$refs.file[f]
   <v-file-input chips multiple @change="addFiles()" 
          label="File(s)" v-model="file.files"></v-file-input>

   methods: {
        addFiles(){
            this.files.forEach((file, f) => {

                this.readers[f] = new FileReader();
                this.readers[f].onloadend = (e) => {

                    let fileData = this.readers[f].result
                    let imgRef = this.$refs.file[f]
                    imgRef.src = fileData
                    console.log(fileData)

                    // send to server here...
                }

                this.readers[f].readAsDataURL(this.files[f]);
            })
        },
    },