npm 包 esh-qn 使用教程

在前端开发中，我们经常需要上传图片到服务器，从而给用户提供更好的体验和更丰富的内容展示。而七牛云就是一个很好的图片上传服务器，提供了丰富的 API 接口以供开发者使用。要使用七牛云上传图片，我们可以借助 npm 包 esh-qn，这个包可以帮助我们简化上传图片的流程，让我们更加专注于业务代码的编写。

什么是 esh-qn？

esh-qn 是一个基于 Node.js 构建的上传图片库，使用 esh-qn 可以方便地将图片上传到七牛云服务器，并且支持自定义上传策略、图片处理等高级功能。esh-qn 的使用方法非常简单，只需要引入包并按照规范调用 API 即可实现上传功能。

开始使用 esh-qn

在开始使用 esh-qn 之前，我们需要首先在七牛云官网上申请自己的 AccessKey 和 SecretKey，这两个 key 都是与用户账号绑定的，所以需要先登录七牛云账号并进行认证。

安装 esh-qn

打开终端或命令行窗口，输入以下命令安装 esh-qn：

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

初始化 esh-qn

初始化 esh-qn 的方法如下：

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

以上代码中，我们通过qn.create()方法创建了一个 esh-qn 客户端实例，该实例包含了我们需要上传图片所需要的信息：

accessKey 和 secretKey 是我们在七牛云上申请的 key，用于鉴权和上传验证；
bucket 是我们在七牛云上创建的存储空间名称；
origin 是我们 CDN 的外网域名，用于访问图片；
timeout 是可选参数，表示 RPC 超时时间，单位：ms。默认值为一个小时；
zone 是可选参数，表示上传的存储区域。有五个可选区域，分别为华东（Zone_z0）、华北（Zone_z1）、华南（Zone_z2）、北美（Zone_na0）和新加坡（Zone_as0）。

上传图片

上传图片的方法如下：

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

filePath 是待上传的文件路径；
key 是上传到服务器上的文件名；
options 是可选参数，用来指定上传的配置项，包括上传策略、自定义变量、图片处理等；
callback 是上传结束后的回调函数，函数原型为：(err, result) => {}。

以下是一个简单的例子：

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

在这个例子中，我们指定了上传文件的 mimeType 为image/jpeg，并将文件上传到your-file-name.jpg这个 key 中。在上传成功后，我们将得到如下信息：

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

我们可以通过这个地址来访问上传的图片。

其他上传方法

除了使用uploadFile()方法上传文件外，esh-qn 还提供了其他上传方法，包括：

uploadBuffer()：将缓存中的二进制数据上传到服务器；
uploadStream()：将流中的二进制数据上传到服务器；
batch()：同时进行多个文件的上传；
fetch()：从网络上抓取图片并上传。

这些上传方法的具体使用方式可以在 esh-qn 的官方文档中查看。

图片处理与回调验证

使用 esh-qn 可以方便地在上传图片的同时对图片进行处理（如裁剪、缩放、水印等）并进行回调验证。这一功能非常实用，可以让我们的应用达到更好的用户体验和运营效果。

图片处理

图片处理是指对上传的图片进行特定的处理操作，如缩放、裁剪、添加水印等。在 esh-qn 中，图片处理有两种方式：持久处理和数据处理。

持久处理：将处理结果保存在服务器上，可以通过 CDN 访问。持久处理是通过七牛云的持久化机制实现的，可以将处理请求发送给七牛云服务器，服务器会自行进行处理并返回处理后的图片 URL。该 URL 可以在上传时返回，不会对上传性能造成影响。
数据处理：在上传时动态处理图片，不会在服务器上保存处理后的图片。

在使用 esh-qn 对图片进行处理时，我们需要给上传策略增加相关指令，并在上传时将指令传递给服务器。例如：

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

以上为对图片进行缩放和添加水印的上传请求，其中persistentOps变量用来指定操作类型和参数。这是一个 JSON 字符串，使用|分隔多个操作指令。

回调验证

在上传完毕后，我们可以让七牛云回调指定的 URL 地址，通知服务器图片已经上传成功或处理完毕。在回调时，七牛云会在 HTTP 头部中添加认证信息，我们可以验证这些信息以确认请求是真实有效的。在处理回调请求时，我们可以根据回调结果更新图片的信息、处理相关业务逻辑等。

使用 esh-qn 进行回调验证的方法如下：

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

其中，callbackBody指定回调的HTTP 请求体，包括文件名、文件HASH值、文件大小、桶名、Key等信息。callbackUrl为接受回调请求的服务器地址。在收到回调请求后，我们可以在服务器端验证请求的合法性，并根据需要进行相应的处理。

总结

使用 esh-qn 可以方便地将图片上传到七牛云服务器，支持自定义上传策略、图片处理和回调验证等高级功能，使得图片上传变得更加简单方便。在开发实际项目时，我们可以根据需要选择适当的上传方式和配置，以达到最佳的性能和用户体验效果。

来源：JavaScript中文网，转载请联系管理员！本文地址：https://www.javascriptcn.com/post/72201