Làm sao để upload tệp lên S3 Bucket của Amazon

2nd Nov 2022
Làm sao để upload tệp lên S3 Bucket của Amazon
Table of contents

Amazon web services đã không còn xa lạ gì với chúng ta khi làm lập trình web nói riêng cũng như lập trình úng dụng nói chung. Ở bài viết này tôi sẽ hướng dẫn các bạn tải file lên s3 bucket amazon sử dụng framework Laravel. Tôi sẽ dùng Laravel 8 sẽ có 1 số thay đổi so với bản cũ trước đây như bản 6, 5.

Để có thể tải lên thì các bạn cần có s3 bucket, bài viết này cũng sẽ hướng dẫn các bạn tạo s3 bucket của riêng mình.

Bước 1: Tạo s3 Bucket

Đi đến Amazon Web Service Console và đăng nhập tài khoản

Chọn vào S3 ở list Servies

Chọn "Create Bucket" và bạn sẽ thấy form dưới đây, bạn có thể điền tên bucket của mình ở đó.

Làm sao để upload tệp lên S3 Bucket của Amazon

Tạo IAM User. Chọn vào đây để tạo

Chọn vào nút "Create User" như dưới đây.

Làm sao để upload tệp lên S3 Bucket của Amazon

Tiếp theo thêm Username dùng và chọn "Programmatic access" từ "access type". sau đó nhấp vào tiếp theo.

Làm sao để upload tệp lên S3 Bucket của Amazon

Tiếp theo Chọn “Attach Existing Policy Directly” và chọn “AmazonS3FullAccess” từ liên kết quyền.

Làm sao để upload tệp lên S3 Bucket của Amazon

Bạn có thể bỏ qua và nhấp vào tiếp theo ở bước tiếp theo.

Làm sao để upload tệp lên S3 Bucket của Amazon

Bạn có thể xem chi tiết người dùng và sau đó nhấp vào nút "Create User".

Làm sao để upload tệp lên S3 Bucket của Amazon

Bây giờ bạn sẽ thấy người dùng đã tạo trong liên kết. có "Access Key ID" và "Secret Access Key" mà tôi cần trên tệp .env.

Làm sao để upload tệp lên S3 Bucket của Amazon

Bước 2: Cài đặt Laravel 8

Các bạn có thể tạo trước dự án Laravel và bỏ qua bước này nhưng ở đây tôi sẽ hướng dẫn từng bước nên tôi sẽ tạo mới 1 dự án. Để tạo các bạn chạy câu lệnh:
composer create-project --prefer-dist laravel/laravel blog

Bước 3: Cài đặt Amazon S3 Composer Package

Nếu bạn chưa cài đặt gói s3 amazon thì bạn phải cài đặt gói s3 composer bằng cách sử dụng lệnh sau:
composer require --with-all-dependencies league/flysystem-aws-s3-v3 "^1.0"

Bước 4: Configure AWS S3 Credentials trong .env

Bây giờ bạn cần thêm thông tin đăng nhập aws vào tệp .env của mình như sau: .env

AWS_ACCESS_KEY_ID=AKIAVAEWWDTDY...
AWS_SECRET_ACCESS_KEY=Zp/wgwj46SAC....
AWS_DEFAULT_REGION=us-east-2
AWS_BUCKET=itsolutionstuff-bucket
AWS_USE_PATH_STYLE_ENDPOINT=false

Bước 5: Tạo route để có thể lấy file và tải lên s3

Bước tiếp theo tôi sẽ tạo 2 route mới ở file web.php. Một route để lấy nội dung của file và một route để tải nó lên s3:
routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ImageUploadController;  
  
Route::get('image-upload', [ ImageUploadController::class, 'imageUpload' ])->name('image.upload');
Route::post('image-upload', [ ImageUploadController::class, 'imageUploadPost' ])->name('image.upload.post');

Bước 6: Tạo controller ImageUpload

Ở đây sẽ tạo ra 1 controller mới là ImageUpload và nó sẽ bao gôm 2 phương thức mageUpload() và imageUploadPost(). Một phương thức sẽ xử lý lấy nội dung file, một phương thức xử lý tải ảnh lên s3:

app/Http/Controllers/ImageUploadController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class ImageUploadController extends Controller
{
     /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function imageUpload()
    {
        return view('imageUpload');
    }
    
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function imageUploadPost(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
    
        $imageName = time().'.'.$request->image->extension();  
     
        $path = Storage::disk('s3')->put('images', $request->image);
        $path = Storage::disk('s3')->url($path);
  
        /* Store $imageName name in DATABASE from HERE */
    
        return back()
            ->with('success','You have successfully upload image.')
            ->with('image', $path); 
    }
}

Bước 7: Tạo blade bao gồm form tải

Bước cuối cùng, chúng ta cần tạo tệp image_upload.blade.php và trong này chúng ta phải tạo form để có thể nhập tệp vào:

resources/views/image_upload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>laravel File Uploading with Amazon S3 - ItSolutionStuff.com.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
    
<body>
<div class="container">
     
    <div class="panel panel-primary">
      <div class="panel-heading"><h2>laravel File Uploading with Amazon S3 - ItSolutionStuff.com.com</h2></div>
      <div class="panel-body">
     
        @if ($message = Session::get('success'))
        <div class="alert alert-success alert-block">
            <button type="button" class="close" data-dismiss="alert">×</button>
                <strong>{{ $message }}</strong>
        </div>
        <img src="{{ Session::get('image') }}">
        @endif
    
        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    
        <form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
    
                <div class="col-md-6">
                    <input type="file" name="image" class="form-control">
                </div>
     
                <div class="col-md-6">
                    <button type="submit" class="btn btn-success">Upload</button>
                </div>
     
            </div>
        </form>
    
      </div>
    </div>
</div>
</body>
  
</html>

Bây giờ bạn có thể chạy và kiểm tra lại những gì đã làm.

Bạn thấy bài viết này như thế nào?
1 reaction

Add new comment

Image CAPTCHA
Enter the characters shown in the image.

Related Articles

Danh sách này có 4 sản phẩm nên chưa cần phân trang, nếu số lượng sản phẩm lên đến vài chục sản phẩm

Hiện nay kiến trúc Microservices đang là chủ đề được cộng đồng Developer vô cùng quan tâm

Hôm nay chúng ta cùng tìm hiểu về Eloquent trong Laravel với mối quan hệ nhiều - nhiều (many to many relationship)

Kiểm soát hợp lí truy cập nội dung trang web là yếu tố quyết định trong việc điều hành một máy chủ bảo mật.

Trong lập trình web, authorization (phân quyền) là chức năng vô cùng quan trọng và không thể thiếu