Javascript 使用vue上载多个动态文件

我知道这个问题已经被问了很多，但大多数问题是如何上传多个图像而不知道哪个图像属于哪个数据。我知道我们无法将v-model绑定到输入文件，所以我尝试了另一种方法，但这也不起作用。检查vue控制台时，v-model文件为空

Vue

<div class="row mt-2" v-for="(new_member,index) in new_members" :key="index">
    <div class="col-md-4">
        <label>NAME</label>
        <input class="form-control" type="text" v-model="new_member.name" required/>
    </div>
    <div class="col-md-4">
        <label>POSITION</label>
        <input class="form-control" type="text" v-model="new_member.position" required/>
    </div>
    <div class="col-md-4">
        <label>IMAGE</label>
        <input type="file" @change="onFileChange(index,$event)" name="file" ref="fileInput" required/>
    </div>
</div>
<button class="btn btn-primary col-md-2 col-12 rounded-0 float-right"  @click.prevent="addMoreMember()">ADD MORE</button>

<script>
data(){
    return{
        new_members:[{
            name:'',
            position:'',
            file:''
        }]
    }
},
methods:{
    addMoreMember(){
        this.new_members.push({name:'',position:'',file:''})
    },
    onFileChange(index,$event) {
        this.new_members[index].file =  $event.target.files[0]
    },
}
</script>

名称
位置
形象
添加更多
数据（）{
返回{
新成员：[{
名称：“”，
位置：“”，
文件：“”
}]
}
},
方法：{
addMoreMember（）{
this.new_members.push（{name:''，position:''，file:''}）
},
onFileChange（索引$event）{
this.new_成员[index].file=$event.target.files[0]
},
}

经过计算的猜测告诉我Vue没有检测到这些对象更改。看

您可以在文档中使用

Vue.set

添加被动属性，或尝试：

onFileChange（索引$event）{
const member=this.new_成员[索引]；
此.新的_成员.拼接（索引，1{
……成员，
文件：$event.target.files[0]
});
},