从Vue将多个动态文件上传到laravel

Question

我正在尝试将多个文件及其各自的数据从vue上传到laravel。我正在vue中获取文件（在vue控制台上），但是在laravel控制器上提交表单并执行 dd（$ request ['new_members']）; 时，它返回以下结果： / p>

其他数据可用，但文件值不见了。

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]
    },
    submit(){
        let form = new FormData()
        form.append('new_members',JSON.stringify(this.new_members));
        form.append('content_team', this.content_team);
        axios.post('/api/mainpage/addNewMember',form).then(res=>{

        }) 
    },
}
</script>

Answer 1

对于多个文件上传概念，

您需要创建仅用于上传文件的API服务，并返回该响应返回string for accessing uploaded file path，

对于每个文件上传，您需要调用您创建的此API服务。 最后提交页面时，您只需发送从文件上传API服务获得的文件路径string

我希望你能明白我的意思❤