Как отобразить изображение с помощью AWS S3 и Vapor 3 и Leaf - PullRequest
Новая
       45

Как отобразить изображение с помощью AWS S3 и Vapor 3 и Leaf

0 голосов
/ 25 мая 2019

Я настроил AWS S3 bucket и могу загружать туда файлы, используя Vapor 3 и Postman.Я также могу получать файлы с помощью Vapor 3 и Postman, но мне сложно получить и отобразить файлы (png -images) в моем браузере (я использую leaf).

Так как я могу отображать файлы изображений на виде?Я новичок в HTML, AWS S3 и Vapor.

Я использую:

  • Vapor 3
  • AWS S3
  • Листовая упаковка
  • S3 упаковка
  • Пакет VaporExt

Я следовал этому руководству, чтобы настроить все (кроме запроса на получение и политик корзины): https://fivedottwelve.com/blog/using-amazon-s3-with-vapor/

Вот мой код Vapor:

/// GET reguest
func preparePresignedImageUrl(request: Request) throws -> String {

    let baseUrl = awsConfig.url
    let imagePath = awsConfig.imagePath
    let fileName = "x.png"


    guard var url = URL(string: baseUrl) else {
        throw Abort(.internalServerError)
    }
    url.appendPathComponent(imagePath)
    url.appendPathComponent(fileName)

    print("url is \(url)")
    let headers = ["x-amz-acl" : "public-read"]


    let s3 = try request.makeS3Signer()
    let result = try s3.presignedURL(for: .GET, url: url, expiration: Expiration.hour, headers: headers)
    /// Retrieve file data from S3

    guard let presignedUrl = result?.absoluteString else {
        throw Abort(.internalServerError)
    }

    return presignedUrl

}

Маршрут: 

// GET request
 group.get("aws", "image", use: preparePresignedImageUrl)

И в Почтальоне, когда я делаю GET-запрос к этому presignedURL, он дает мне код состояния 200OK.

Мой showImage.leaf файл: 

#set("content") {
<h1>#(title)</h1>

// Here some html to get the image path and display the image?
  <img>

}

#embed("base")

1 Ответ

0 голосов
/ 27 мая 2019

Итак, я предполагаю, что у вас есть очень хороший URL для изображения.

Давайте начнем с создания маршрута в GET /image: 

routes.get("image", use: image)

func image(_ request: Request) -> EventLoopFuture<View> {

}

Чтобы правильно отобразитьВ представлении «Лист» нам понадобится контекст, содержащий данные для переменных «Лист».Это будет выглядеть примерно так: 

struct ImageContext: Encodable {
    let title: String
    let imageURL: String
}

Нам также нужно отредактировать ваш листовой файл, чтобы он использовал свойства в контексте: 

#set("content") {
<h1>#(title)</h1>
<img src="#(imageURL)">
}

#embed("base")

Теперь мы можем отрендерить листовой файлбез нового контекста и вернуть полученное представление из обработчика маршрута.Вот как будет выглядеть реализация обработчика маршрута image: 

func image(_ request: Request) -> EventLoopFuture<View> {
    let context = ImageContext(title: "Image", imageURL: preparePresignedImageUrl(request: request)
    return try request.view().make("showImage", context)
}

Теперь вы сможете получить доступ к localhost:8080/image из вашего браузера, и изображение будет там!

...