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

【问题标题】：How to upload image/file from Vue js to Laravel7 using axios如何使用 axios 将图像/文件从 Vue js 上传到 Laravel7
【发布时间】：2020-10-24 21:20:37
【问题描述】：

我想将带有 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];
        }
    },

Laravel 控制器：

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.');
}

【问题讨论】：

标签： laravel vue.js axios

【解决方案1】：

您必须使用 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 中使用它？？