前言
在开发前端web应用程序时，我们常常需要使用node.js来提供服务。此时koa.js是一个非常受欢迎的web框架。koa.js是一个新的web框架，它将JavaScript的异步和Promise处理戏剧性地引入到web框架中。我们通常选择一些npm包来帮助我们更快捷地完成工作。
在开发web应用程序时，上传图片、avatar等功能是我们用到的最多的功能之一。这时我们就需要使用koa-body-images包。koa-body-images是一个基于koa-body的npm包，提供了一种方法来处理上传的图片，并将其转换为可插入HTML的图像标记。本篇文章将详细介绍koa-body-images的使用方法。
安装
使用koa-body-images需要我们在命令行或终端中使用npm包管理器安装。首先，你需要有一个可用的node.js环境。然后，在命令行或终端中输入以下命令进行安装。
npm install koa-body-images --save
上述命令将会安装koa-body-images包并将其添加到你的package.json文件中。
用法
导入和设置koa-body-images
在导入koa-body-images之前，要确保已经按照如下方式导入了koa模块。
const Koa = require('koa');
const Router = require('koa-router');
const koaBody = require('koa-body');然后在你的koa应用程序中导入koa-body-images包。
const koaBodyImages = require('koa-body-images');接着，你需要通过创建koa对象实例来完成设置。创建koa对象实例前，需要首先创建一个Router对象，并使用koaBody()中间件，并且添加koa-body-images中间件。
const app = new Koa(); const router = new Router(); app.use(koaBody()); app.use(koaBodyImages());
使用koa-body-images来处理上传的图片
例如以下HTML form：
<form id="myform" enctype="multipart/form-data"> <input type="text" name="title"><br> <input type="file" name="picture"><br> <button onclick="myFunction()">上传图片</button> </form>
然后，我们需要在myFunction()函数中使用ajax将图片提交上传：
-- -------------------- ---- -------
-------- ------------ -
----- --- - --- -----------------
---------------- -------------- ------
---------- - -------- -- -
-- ----------- --- ---- -
----------------------
-
--
----- ---- - ----------------------------------
----- -------- - --- ---------------
-------------------
-当图片上传完成后，我们需要在修改koa中间件为koa-body-images，在新的路由上拿到上传文件的标记。
-- -------------------- ---- -------
--------------------------
----------------
----- ----- ----- -- -
----- ---- - -------------------------------
-------- - -
---- -------------
--
-
--注意，我们拿到的标记是一个带有data:image/jpeg;base64的base64格式的string。因此，我们需要将其转换为真正的HTML图像标记。使用以下代码实现转换。
const imgTag = await file.toImgTag();
ctx.body = {
img: imgTag
};此时，我们就可以在HTML中进行如下代码展示了。
-- -------------------- ---- -------
---- -----------
------
--------
-------- ------------ -
----- --- - --- -----------------
---------------- -------------- ------
---------- - -------- -- -
-- ----------- --- ---- -
----- ---- - -------------------------
----- -------- - ---------------------------------
------------------ - ---------
----------------------
-
--
----- ---- - ----------------------------------
----- -------- - --- ---------------
-------------------
-
---------总结
koa-body-images是一个方便快捷、易学易用的npm包，可以极大地方面精简图片上传的工作。我们只需要花费极短的时间学习它的基本用法，便可以使用它在开发中大显身手。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66ccc