如何使用axios将图像/文件从Vue js上载到Laravel7

如何使用axios将图像/文件从Vue js上载到Laravel7,laravel,vue.js,axios,Laravel,Vue.js,Axios,我想将带有vue组件的图像文件上载到laravel控制器。我的问题发生在我单击“提交”按钮时,手机/地址已保存,但图像名称未保存 Vue组件: data(){ return{ id : '', file: '', address : '', N_Phone : '', } }, methods:{ RemplirInfo(e){

我想将带有vue组件的图像文件上载到laravel控制器。我的问题发生在我单击“提交”按钮时,手机/地址已保存,但图像名称未保存 Vue组件:

data(){
        return{
            id : '',
            file: '',
            address : '',
            N_Phone : '',
        }
    },
    methods:{
        RemplirInfo(e){
            e.preventDefault();
            axios.put('http://127.0.0.1:8000/api/RemplirInfo/'+this.id , { 
                address:this.address,
                N_Phone:this.N_Phone,
                file:this.file
            })
            .then(response=> console.log(response))
            .catch(error => console.log(error));
        },
        imgChange(e){
            this.file = e.target.files[0];
        }
    },
拉威尔控制器:

public function RemplirInfo(request $request , $id)
{
    
    $request->validate([
        'address'       => 'required',
        'N_Phone'       => 'required',
        'file'       => 'required'
    ]);

    $image = $request->file('file');
    $new_name = rand() . '.' . $image->getClientOriginalExtension();
    $image->move(public_path('images/AgencyProfileImage'),$new_name);

    
    $agency = agency::where('user_id', $id)->first();
    $agency->address = $request->address;
    $agency->N_Phone = $request->N_Phone;
    $agency->img_Profile = $new_name;
    $agency->save();
    
    return response()->json($agency);
    //return redirect()->back()->with('success', 'File uploaded successfully.');
}

您必须使用javascript的FormData API使用vue将文件发布到您的Laravel应用程序。 修改视图组件中的代码,如下所示

data(){
    return{
        id : '',
        file: '',
        address : '',
        N_Phone : '',
    }
},
methods:{
    RemplirInfo(e){
        e.preventDefault();

        var form = new FormData();
        form.set('address',this.address);
        form.set('N_Phone',this.N_Phone);
        form.set('file',this.file);

        axios.put('http://127.0.0.1:8000/api/RemplirInfo/'+this.id , form)
        .then(response=> console.log(response))
        .catch(error => console.log(error));
    },
    imgChange(e){
        this.file = e.target.files[0];
    }
},

如何在控制器laravel中使用它??