如何将用户个人资料图像加载到视图中。 Laravel

时间:2015-01-17 22:07:58

标签: php database laravel eloquent blade

我正在尝试使用Laravel创建一个社交网站。用户拥有个人资料图片的个人资个人资料图片以3种不同的尺寸显示。主要配置文件页面为1(176x176),用于评论的较小版本(50x50)以及在导航栏上显示的小型版本,作为其配置文件的链接(30x30)

在我的数据库中,用户存储在users表中:

id->int->primarykey
media_id->int (id of the media set as the users profile picture)
first_name->varchar
last_name->varchar
email->varchar
password->varchar

media_id将是用户个人资料图片的ID。 所有用户上传的图像都将存储在公共目录中:public / images / users / {users id} /

(但用户的个人资料图片将存储在public / images / users / {users id} / profilePictures /)

图像的网址存储在媒体表中:

id->int->primary
user_id->int (id of the user that uploaded the image)
mime_type->varchar
url->varchar

我无法弄清楚如何将用户桌面上的用户media_id设置为包含用户上传的图片网址的媒体的ID。

以下是我上传个人资料照片的表单

Route::get('{id}/edit-profile-picture', ['as' => 'profile_editProfilePicture', 'uses' => 'UsersController@showEditProfilePicture']);

UsersController @ showEditProfilePicture:

public function showEditProfilePicture($id)
    {
        $user = $this->userRepository->findById($id);

        return View::make('edit_profile-picture');
    }

以下是我用于上传图片的表单

{{ Form::open(['route' => 'postProfilePicture', 'files' => true]) }}
  {{ Form::hidden('user_id', Auth::user()->id) }}
  <h5 class="post-type">Upload Picture</h5>
  {{ Form::file('media') }}
  {{ Form::submit('Update Profile Picture', ['class' => 'posting-submit-btn d-bluegreen-btn-thick']) }}
{{ Form::close() }}

以下是表单提交时的路由。

Route::post('edit-profile-picture', ['as' => 'postProfilePicture', 'uses' => 'MediaController@storeProfilePicture'])->before('csrf');

这是MediaController @ storeProfilePicture。请注意我如何将原始图像保存到public / images / {users is} / profilePictures /目录,以及制作3个不同大小的图像并将其保存在那里。

class MediaController extends \BaseController {


    public function storeProfilePicture()
    {
        $media = new Media;

        $input = Input::all();

        $image = Image::make($input['media']->getRealPath());

        $name =  time() . '-' . Auth::user()->id . '.' . $input['media']->getClientOriginalExtension();
        $imagePath = public_path() . '/images/users/';
        $directory = Auth::user()->id;

        // check if directory exists, if not create the directory
        File::exists($imagePath . $directory . '/profilePictures') or File::makeDirectory($imagePath . $directory . '/profilePictures', 0777, true, true);

        $image->save($imagePath . $directory . '/profilePictures/' . $name)
              ->fit(176, 176)
              ->save($imagePath . $directory . '/profilePictures/' . '176thumb-' . $name)
              ->fit(50, 50)
              ->save($imagePath . $directory . '/profilePictures/' . '50thumb-' . $name)
              ->fit(30, 30)
              ->save($imagePath . $directory . '/profilePictures/' . '30thumb-' . $name);
        // save to database
        $media->url = $name;
        $media->mime_type = $input['media']->getMimeType();
        $media->user_id = $input['user_id'];
        $media->save();

        return Redirect::back();
    }
}

媒体模式

class Media extends Eloquent {
    /**
     * The database table used by the model.
     *
     * @var string
     */
    protected $table = 'medias';

    protected $fillable = ['url', 'user_id', 'mime_type'];

    public function user()
    {
        return $this->belongsTo('User');
    }
} 

用户模型

class User extends Eloquent implements UserInterface, RemindableInterface {

    use UserTrait, RemindableTrait, EventGenerator, FollowableTrait;

    /**
     * Which feilds may be mass assigned
     * @var array
     */
    protected $fillable = ['first_name', 'last_name', 'email', 'password', 'media_id'];

    /**
     * The database table used by the model.
     *
     * @var string
     */
    protected $table = 'users';


    /**
     * @return mixed
     */
    public function media()
    {
        return $this->hasMany('Media');
    }

}

以下是个人资料页面的路线

 Route::get('{id}', ['as' => 'profile', 'uses' => 'UsersController@show']);

这是UsersController @ show

public function show($id)
    {
        $user = $this->userRepository->findById($id);

        return View::make('profile')->withUser($user);
    }

现在,在个人资料页面中,我可以轻松地显示用户的名字:

<h4>{{ $user->first_name }}</h4>

我试图找出如何显示用户176x176个人资料图片。

自从我将原始图片保存到public / images / users / {user id} / profilePictures / {image-name}

然后将图片名称保存到media table字段

下的url

并制作了3种不同大小的图片并将其重命名为176thumb- {image-name},50thumb- {image-name}和30thumb- {image-name} 并将它们存储在public / images / users / {user id} / profilePictures / {image-name}

我认为我可以通过以下方式获取图像:

<img src="images/users/{{ $user->id }}/profilePictures/176thumb-{{ $user->media->url }}" width="176" height="176">
<img src="images/users/{{ $user->id }}/profilePictures/50thumb-{{ $user->media->url }}" width="176" height="176">
<img src="images/users/{{ $user->id }}/profilePictures/30thumb-{{ $user->media->url }}" width="176" height="176">

但这不起作用。

我检查public / images / users /,我看到图像在目录中。我检查数据库中的medias表,用户ID是否正确,mime_type是否正确,url是否正确

但我不知道如何让图片显示在页面上?

我知道我的一个问题是用户表中的media_id没有设置(用户的media_id被认为是作为个人资料图片的媒体的id)

当我将图片的user_id,mime_type和url保存到数据库时,如何设置用户的media_id?

最后我如何将属于用户的medias表中的url调用到页面中?

非常感谢你,我非常感谢任何花时间和精力帮助我的人。

1 个答案:

答案 0 :(得分:1)

首先,为User模型添加新关系:

public function profilePicture(){
    return $this->belongsTo('Media', 'media_id');
}

然后在保存新媒体时,使用associate

$media->save();
$user = Auth::user();
$user->profilePicture()->associate($media);
$user->save();

然后在视图中使用{{ $user->profilePicture->url }}检索个人资料图片网址。

但是,虽然这应该有效,但您可能需要考虑在媒体表中添加is_profile_picture标记。