前端博主，热衷各种前端向的骚操作，经常想到哪就写到哪，如果有感兴趣的技术和前端效果可以留言～博主看到后会去代替大家踩坑的～
主页: oliver尹的主页
格言: 跌倒了爬起来就好～
来个关注吧，点个赞吧，谢谢
《NodeJS》Koa实现图片上传功能
一、前言
本文来自于博主学习中的笔记，本文是 关于nodejs中的Koa框架，相对而言，express应该在新项目中很少了吧…
二、本文内容简介
本文主要实现的功能是 图片上传功能，借助的插件是 koa-body 和 koa-static ，因为在现实项目中，图片上传是一个非常常见的功能，比如背景图的上传，头像的上传，正常情况下我们并 不会将图片转成Base64存储在数据库，这种做法缺点很多，比如存储空间，网络传输也是问题；
因此，实际项目中往往会后端获取到图片后，将图片存储在文件服务器，接着将文件所在的路径返回给客户端，客户端只需要使用链接即可，大致流程如下：
- 前台将图片通过接口上传；
- 后台接收，简单验证；
- 后台获取到图片后转存到文件服务；
- 生成图片路径以及唯一ID返回前台；
- 前台获取路径以及唯一ID发送到对应新接口中；
- 接口保存信息以便使用；
大致流程就是这样，下面就是关于具体实现的；
三、koa-body实现图片上传
koa-body是一个在koa中处理图片的中间件，这个插件的目的是后端获取前台图片资源并实现转存，比如后端接收到前端发送的图片a后，将图片a存储到指定的目录保存；
3.1 安装与使用
依然利用npm进行安装
npm install koa-body --save
接着是引入，引入依然是在类似于 main.js 这种入口文件里进行引入，如下
const koaBody = require("koa-body");
使用也非常简单，直接使用
app.use(koaBody());
但是这么写是不够的，我们还需要配置一些其它参数，这些参数可以设置上传的目录的等等；
app.use(
koaBody({
// 代表上传的文件
multipart: true,
//
formidable: {
// 上传目录，意思是说上传到当前项目的/public/upload目录下
uploadDir: path.join(__dirname, "/public/upload"),
// 是否保留拓展名
keepExtensions: true,
},
})
);
这样，koa-body就配置完成了，接着我们测试一下，使用postman选择一个文件进行上传
在服务端代码编写如下
const {
koaBody } = require("koa-body");
const path = require("path");
usersRouter.post("/upload", (ctx) => {
const path = ctx.request.files;
ctx.body = {
path: path };
});
app.use(
koaBody({
// 代表上传的文件
multipart: true,
//
formidable: {
// 上传目录
uploadDir: path.join(__dirname, "/public/upload"),
// 是否保留拓展名
keepExtensions: true,
},
})
);
得到结果如下
并且图片也被保存到指定目录下方了
四、koa-static生成图片链接
这也是一个Koa的中间件，它的主要作用是可以 生成一个静态服务，使得资源可以被使用http来访问，换句话说可以将上一个小节的图片资源生成一个链接，这个链接返回到客户端，客户端使用这个链接可以直接将图片展示
4.1 安装
同理，使用npm进行安装
npm install koa-static --save
安装完成后可以在package.json中查看
4.2 使用并查看
使用还是非常简单的，一共就两步：引入和注册；
第一步：
const koaStatic = require("koa-static");
const path = require("path");
// 注意的是通常静态服务都是在最前面
app.use(koaStatic(path.join(__dirname, "/public")));
这样就完成了静态服务的配置，我们可以通过浏览器访问上一小节的上传图片，比如：
那么我们就可以在浏览器中输入地址：http://localhost:3000/upload/34778b9ff43205ae313ce2800.png，得到结果如下：
明显，图片已经可以被正常访问了，接下来就是改造接口，我们希望把图片的路径通过接口返回
4.3 接口改造
对于接口的改造，第一个是我们需要获取文件的文件名，其次将文件名拼接成url返回成客户端
获取文件名，这一步其实也简单，可用的方法很多，比如string上的截取等等，而这里我们采用的是path模块上的basename方法
const path = require("path");
usersRouter.post("/upload", (ctx) => {
const file = ctx.request.files.file;
const basename = path.basename(file.filepath);
});
拼接就更简单了，由于本地虽然叫http://localhost:3000，但部署后是域名，因此这里不能写死，可以使用ctx.origin来获取
usersRouter.post("/upload", (ctx) => {
const file = ctx.request.files.file;
const basename = path.basename(file.filepath);
console.log(basename);
ctx.body = {
path: `${
ctx.origin}/upload/${
basename}` };
});
使用postman测试
成功返回，在浏览器中打开这个链接
也没有问题；
五、小结
本文算是一个实战篇，主要分享的内容是使用koa实现一个图片上传，其实功能是比较简单的，使用到的中间件一共有两个：
- koa-body，实现图片的上传与保存；
- koa-static，实现静态服务，得以生成链接返回到前端；