Laravel React 个人资料图片上传

Question

我想使用reactjs在laravel中上传个人资料图片。但这不起作用，我有错误。 我的代码：

路线：

    Route::post('/profile', [ProfileController::class, 'update'])->name('profile.update');

个人资料更新请求：

public function rules()
    {
        return [
            'name' => ['string', 'max:255'],
            'email' => ['email', 'max:255', Rule::unique(User::class)->ignore($this->user()->id)],
            'avatar' => ['mimes:jpg,jpeg,png,bmp' ,'nullable'],
            
        ];
    }

在用户数据库中的头像是：

 $table->string('avatar')->nullable();

反应代码： 更新个人资料信息 jsx:

const user = usePage().props.auth.user;
    const { data, setData, post } = useForm({
        name: user.name,
        email: user.email,
        avatar : null,
    });
    const submit = (e) => {
        e.preventDefault();
        post(route('profile.update'));
        setData("avatar" ,null)
    };
return(
 <form onSubmit={submit}  enctype="multipart/form-data">
                    <TextInput
                        id="name"
                        label="Name"
                        value={data.name}
                        handleChange={(e) => setData('name', e.target.value)}
                        autoComplete="name"
                    />
                    <TextInput
                        id="email"
                        type="email"
                        label="Email"
                        value={data.email}
                        handleChange=""
                        disabled
                        className="text-white"
                        autoComplete="email"
                    />
                    <TextInput id="avatar" type="file" label="Avatar" name="avatar"
                               handleChange={(e) => setData('avatar', e.target.avatar[0])}
                    />
                    
                <div className="flex items-center justify-around mt-4">
                    <PrimaryButton className="ml-4">Save</PrimaryButton>
            </form>
);

配置文件控制器：

public function update(ProfileUpdateRequest $request)
    {
        $request->user()->fill($request->validated());
            if ($request->has('avatar')){
                $filename = time().'.'.$request->avatar->getClientOriginalExtension();
                $request->avatar->move(public_path('avatar', $filename));
                User::update(['avatar' => $filename])->save();
            }

        $request->user()->save();

        return Redirect::route('profile.edit');
    }

错误：在 null 上调用成员函数 getClientOriginalExtension()。 还有图片不上传。因为返回 null。

Answer 1

试试这个代码。

if ($request->hasFile('avatar')){
    $filename = time().'.'.$request->file('avatar')->getClientOriginalExtension();
    $request->file('avatar')->move(public_path('avatar', $filename));
    User::update(['avatar' => $filename])->save();
}

让我知道这是否有效。

Answer 2

在 React 组件中

const {data, setData, post, processing, errors, reset} = useForm({
    ...........
    avatar   : '',
    ...........
});

useEffect(() => {
    return () => {
        reset(.........,'avatar');
    };
}, []);

const submit = (e) => {
    e.preventDefault();
    post(formUrl);
};
<form onSubmit={submit} className="........." encType={`multipart/form-data`}>
  ..........
  <TextInput
      type={'file'}
      id={`avatar`}
      name={`avatar`}
      className={`.........`}
      onChange={(e) => setData('avatar', e.target.files[0])}
  />
  ..........
</form>

在控制器中

$storageFolder = 'avatar';
if($request->hasFile('avatar')){
    $file = $request->file('avatar');
    $fileName =  Str::random(5).'__'.date('d_m_y_h_i_s').'.'.$file->getClientOriginalExtension();
    Storage::disk('public')->putFileAs($storageFolder, $file,$fileName);
    $fileNameWithPath = 'storage/'.$storageFolder.$fileName;
}else{
    $fileNameWithPath = null;
}

YourModelName::updateOrCreate([
 .......
],[
    'avatar' => $fileNameWithPath,
    .........
]);

这只是为了让您了解上传如何与 React 和 Laravel 配合使用