Question

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

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

我正在使用：

蒸气3
AWS S3
树叶包装
S3程序包
VaporExt软件包

我按照本教程设置了所有内容（获取请求和存储桶策略除外）：https://fivedottwelve.com/blog/using-amazon-s3-with-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)

在邮递员中，当我向该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。

让我们开始在 <?php $total = 0; ?> <?php if(isset($_SESSION['cart'])){ ?> <?php foreach($_SESSION['cart'] as $row): ?> <?php if($row['qty'] != 0): ?> <tr> <td><strong><?php echo $row['product'];?></strong></td> <td>RM <?php echo $row['price'];?></td> <td> <form action="cart/data.php?q=updatecart&id=<?php echo $row['proID'];?>" method="POST"> <input type="number" name="qty" value="<?php echo $row['qty'];?>" min="0" style="width:50px;"/> <button type="submit" class="btn btn-info">Update</button> </form> </td> <?php $itotal = $row['price'] * $row['qty']; ?> <td><font class="itotal">RM <?php echo $itotal; ?></font></td> <td><a href="cart/data.php?q=removefromcart&id=<?php echo $row['proID'];?>"><i class="fa fa-times-circle fa-lg text-danger removeproduct"></i></a></td> </tr> <?php $total = $total + $itotal;?> <?php endif;?> <?php endforeach; ?> <?php $_SESSION['totalprice'] = isset($_SESSION['totalprice']) ? $_SESSION['totalprice'] : $total; ?> <?php $vat = $total * 0.10; ?> <tr> <td><strong>Sub Total</strong></td> <td>RM <?php echo number_format($total - $vat,2) ?></td> </tr> <tr> <td><strong>Service Tax (10%)</strong></td> <td>RM <?php echo number_format($vat,2) ?></td> </tr> <tr> <td><strong>TOTAL</strong></td> <td><strong>RM <?php echo number_format($total,2) ?></strong></td> </tr> </tbody> </table> <?php }else{ }?>  function checkout(){ include('../db.php'); $fname = $_POST['fname']; $lname = $_POST['lname']; $contact = $_POST['contact']; $email = $_POST['email']; $address = $_POST['address']; $fullname = $fname.' '.$lname; $date = date('m/d/y h:i:s A'); $item = ''; foreach($_SESSION['cart'] as $row): if($row['qty'] != 0){ $product = '('.$row['qty'].') '.$row['product']; $item = $product.', '.$item; } endforeach; $amount = $_SESSION['totalprice']; echo $q = "INSERT INTO dbgadget.order VALUES (NULL, '$fullname', '$contact', '$address', '$email', '$item', '$amount', 'unconfirmed', '$date', '')"; mysql_query($q); unset($_SESSION['cart']); header("location:../success.php"); }处创建一条路线：

GET /image

要正确呈现Leaf视图，我们需要一个包含Leaf变量数据的上下文。看起来像这样：

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) }，并且图像就在那里了！

如何使用AWS S3和Vapor 3和Leaf

1 个答案: