Question

我想将带有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.');
}

Answer 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];
    }
},

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

1 个答案: