在前端开发中，我们经常需要上传图片到服务器，从而给用户提供更好的体验和更丰富的内容展示。而七牛云就是一个很好的图片上传服务器，提供了丰富的 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：
npm install 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）。
上传图片
上传图片的方法如下：
client.uploadFile(filePath, key, options, callback);
filePath是待上传的文件路径；key是上传到服务器上的文件名；options是可选参数，用来指定上传的配置项，包括上传策略、自定义变量、图片处理等；callback是上传结束后的回调函数，函数原型为：(err, result) => {}。
以下是一个简单的例子：
-- -------------------- ---- -------
----- ------- - -
--------- -------------
--
------------------------------------------- --------------------- -------- ----- ------- -- -
-- ----- -
-------------------
- ---- -
--------------------
-
--在这个例子中，我们指定了上传文件的 mimeType 为image/jpeg，并将文件上传到your-file-name.jpg这个 key 中。在上传成功后，我们将得到如下信息：
{
hash: '...', // 图片 MD5 值
key: 'your-file-name.jpg', // 上传文件名
url: 'your-cdn-origin/your-file-name.jpg' // 上传的图片在七牛云上的外网访问地址
}我们可以通过这个地址来访问上传的图片。
其他上传方法
除了使用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