七牛云对象存储服务是一种方便、高效、稳定的云存储服务，旨在帮助用户快速构建云端存储服务。Angular 是一种基于 TypeScript 的前端框架，为我们提供了一个快速构建 Web 应用程序的平台。在本篇文章中，我们将探讨如何在 Angular 中配置七牛云对象存储服务来存储和管理我们的应用程序的文件。
步骤 1：创建一个七牛云账户
首先，我们需要注册一个七牛云账户。可以通过七牛云官方网站进行注册和登录。同样，七牛云提供了免费的测试账户。注册成功后，我们需要在控制台中创建一个存储空间。
步骤 2：获取 Access Key 和 Secret Key
接下来，我们需要获取七牛云存储空间的 Access Key 和 Secret Key。这两个密钥是访问七牛云对象存储服务的钥匙，因此必须存储在安全的地方。我们可以在七牛云的控制台中获取这两个密钥，具体操作如下：
登陆七牛云控制台，打开对应 存储空间
点击右上角的 配置策略
获取 Access Key 和 Secret Key
步骤 3：安装依赖
在我们的 Angular 项目中，我们可以使用 ngx-qiniu-upload 依赖包，该依赖以七牛云官方 SDK 作为核心实现，来实现 Angular 应用程序中的对象存储服务。我们可以通过 npm 包管理器来安装此依赖：
npm install ngx-qiniu-upload --save
步骤 4：配置 ngx-qiniu-upload 服务
在安装了 ngx-qiniu-upload 依赖后，我们需要在 Angular 模块中导入 NgxQiniuUploadModule 并在 providers 中配置 TokenService，且需要输入步骤 2 获取到的 Access Key 和 Secret Key。代码如下：
-- -------------------- ---- -------
------ - -------------------- - ---- -------------------
------ - ------------ - ---- -------------------
-----------
-------- -
---------------------
--
---------- -
-------------
- -------- -------------- --------- - -- -----------
---------- ------------------
---------- ------------------
------- --------------
-- ------------------ --- -----
------- --------------------
--
--
--
--
------ ----- ---------- --步骤 5：将文件上传到七牛云
现在，我们已经完成了配置，可以在我们的 Angular 应用程序中使用 ngx-qiniu-upload 来将文件上传到七牛云。我们可以使用 HTML 的 file-input 元素来获取用户从本地计算机中选择的文件，并通过 ngx-qiniu-upload 服务将其上传。代码示例如下:
-- -------------------- ---- -------
------ ----------- ------------------------------------------------
---------------------- --------- -
----- ---- - ---------
-------------------------------------------------- -- -
----- -------- ------------------ - -
---- ----------------------
------- - ------ ------- --
----------- -----
---------- ------
--
----- ----------- - ----------------------------- ---------
----------------------
------ --------------- -- -
------------------
-- ------------
--
----- ------------ -- -
-------------------
-- ------
--
-- -- -
--------------------
-
--
---
-在以上代码示例中，我们创建了一个文件上传视图，并使用了 this.ngxUploader.upload() 函数将文件上传到七牛云。this.tokenService.getUptoken() 函数是以我们之前配置的密钥认证信息生成一个临时的上传凭证，该凭证是上传文件所必需的。
结论
无论是作为个人还是企业，七牛云对象存储服务都是一个强大而有用的存储库，可以帮助我们轻松存储和管理我们的文件。同时，在 Angular 应用程序中，我们可以使用 ngx-qiniu-upload 服务来方便地将文件上传到七牛云存储服务。通过上述步骤以及示例代码，您可以轻松配置和使用七牛云对象存储服务并使其渗透到您的 Angular 应用程序中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67064e1dd91dce0dc85b7308