upload file array formData vue - vue.js

Question

how to make a file upload function in vue js ? here I create a dynamic form that can be added.
I made a form name and uploaded a file
when the add Attachment button is clicked, the form increases
when I send to the backend, only 1 file is sent, how to make the uploaded file into an array?
and this my code
<div class="col-6">
<div class="row row g-3" v-for="(attachment, index) in attachment" :key="index">
<div style="font-size:13px">Attachment</div>
<div class="col-sm-4">
<input type="text" v-model="attachment.att_name">
</div>
<div class="col-sm-7">
<div class="col">
<input type="file" id="file" ref="file" #change="selectFile"/>
</div>
</div>
</div>
<div style="margin-top: 15px;">
<button type="button" #click="addNewAttachment">Add Attachment</button>
</div>
</div>
//submit button
<div style="margin-top:50px">
<button type="button" #click="onsubmit">Submit</button>
</div>
and this
export default {
name : 'bbb',
data() {
return {
attachment : [
{
att_name: '',
att_file:'',
}
],
}
},
methods:{
selectFile(e) {
const selectedFile = e.target.files[0];
this.attachment.att_file = selectedFile;
},
addNewAttachment() {
this.attachment.push(
{
att_name: '',
att_file:'',
}
);
},
onsubmit(){
const data = new FormData();
data.append("item[]", JSON.stringify(this.attachment));
//for (var lop of data.entries()) {
//console.log(lop[1])
//}
}
}
}