如何使用 AWS S3 和 Vapor 3 和 Leaf 显示图像

Question

我已经设置了 AWS S3 存储桶，我可以使用 Vapor 3 和 Postman 将文件上传到那里。我也可以使用 Vapor 3 和 Postman 获取文件，但我很难在浏览器上获取并实际显示文件（png -图像）（我使用的是 leaf）。

那么如何在视图上显示图像文件呢？我是 HTML、AWS S3 和 Vapor 的新手。

我正在使用：

蒸汽 3
AWS S3
叶包
S3 包
VaporExt 包

我按照本教程设置了所有内容（get 请求和存储桶策略除外）：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)

在 Postman 中，当我向 presignedURL 发出 GET 请求时，它给了我一个状态码 200OK。

我的 showImage.leaf 文件：

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

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

}

#embed("base")

Answer 1

所以我假设您对图像的 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")

现在我们可以在没有新上下文的情况下呈现叶文件，return 路由处理程序生成的视图。下面是 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 并且图像会在那里！

如何使用 AWS S3 和 Vapor 3 和 Leaf 显示图像

How to display image using AWS S3 and Vapor 3 and Leaf

image

amazon-s3

amazon-web-services

vapor

leaf