npm 包 aws-sdk-webkit 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

aws-sdk-webkit 是一个基于 aws-sdk-js 开发的，可以在浏览器中使用的 AWS SDK。它可以让我们在前端代码中调用 AWS 服务，比如 S3 存储、Lambda 函数、DynamoDB 数据库等，而无需一定要依赖后端服务。

在这篇文章中，我们会学习如何使用 aws-sdk-webkit，并且演示如何上传文件到 S3 存储。

安装

通过 npm 安装 aws-sdk-webkit：

npm install aws-sdk-webkit

使用

配置 AWS 身份

使用 aws-sdk-webkit，我们需要先配置 AWS 身份信息。对于中小型项目，我建议直接使用 IAM 用户的键值对（Access Key ID 和 Secret Access Key）。对于大型项目，可以使用 Cognito 或者 AWS STS 做身份管理。

以下是配置 IAM 用户的例子：

import AWS from 'aws-sdk';

AWS.config.update({
  accessKeyId: 'your_access_key_id',
  secretAccessKey: 'your_secret_access_key',
  region: 'your_aws_region',
});

其中，your_access_key_id 和 your_secret_access_key 是你在 AWS 控制台上创建的 IAM 用户的访问密钥，your_aws_region 是你所用的 AWS 区域。你可以根据自己的实际情况做相应的更改。

调用 S3 存储

接下来，我们尝试实现一个简单的文件上传系统，在前端页面上选择一个文件，然后把它上传到 S3 存储，最后输出文件的 URL。

创建 S3 实例

首先，我们需要创建一个 S3 实例，这个实例会绑定我们之前配置的身份信息。

import { S3 } from 'aws-sdk-webkit';

const s3 = new S3();

选择文件

我们可以使用浏览器标准 API 中的 Input 元素来选择文件。下面是一个简单的例子：

<input type="file" id="input-file" />

然后，我们通过 JavaScript 来获取这个元素的值：

const file = document.getElementById('input-file').files[0];

上传文件

到目前为止，我们已经获得了一个文件对象。然后，我们可以使用 S3 的 upload 接口把这个文件上传到 S3 存储。

const uploadResult = await s3.upload({
  Bucket: 'your_bucket_name',
  Key: 'your_file_key',
  Body: file,
}).promise();

其中，your_bucket_name 是你创建的 S3 存储的名称，your_file_key 是你想要给这个上传的文件起的一个唯一标识。Body 选项是文件数据。这里我们使用的是 promise 方法，以便于在上传过程中监控进度、捕获异常等。

输出 URL

最后，我们需要输出这个上传文件的 URL。我们可以使用类似下面这样的代码：

const fileUrl = `https://${your_bucket_name}.s3.${your_aws_region}.amazonaws.com/${your_file_key}`;
console.log(fileUrl);

到这里，我们就成功把一个文件上传到了 S3 存储，并且在页面中输出了它的 URL。

总结

aws-sdk-webkit 是一个很好用的 JavaScript 库，可以使我们更方便地在前端代码中使用 AWS 服务。本文介绍了如何使用 S3 存储服务，并提供了代码示例，供读者参考。希望大家可以学以致用，获得更多的玩具和技能。

示例代码

这里是完整的示例代码，供读者参考。

-- -------------------- ---- -------
------ - -- - ---- -----------------

----- -- - --- -----

-------------------
  ------------ ---------------------
  ---------------- -------------------------
  ------- ------------------
---

----- ---------- - ----- -- -- -
  ----- ---- - -----------------------------------------------
  ----- ------------ - ----- -----------
    ------- -------------------
    ---- ----------------
    ----- -----
  -------------
  ----- ------- - -----------------------------------------------------------------------------------
  ---------------------
--

--------------------------------------------------------------- ----- -- -- -
  ----- -------------
---

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/6005543081e8991b448d185a