文件上传是一个基本功能，几乎每个系统都有，比如上传图片，上传Excel等等。那么如何在Node Koa应用中实现一个支持文件上传的接口呢？本文从环境准备开始，最后用Postman和一个HTML页面进行测试。

01-环境准备

首先，当然需要通过安装Koa和koa-router来初始化一个Koa项目。

npm安装koa koa路由器

设置图像上传目录，将图像上传到指定目录，在app路径下新建一个公共文件夹。目录结构如下：

KOA-upload/-app-public-uploads-index . js-package . JSON Write index . js

const KOA=require(' KOA ')const app=new KOA()router . post('/upload '，CTX={ CTX . body=' KOA upload demo ' })app . use(router . routes())；App.listen (3000，()={console.log('启动成功')console . log(' http://localhost 33603000 ')})；然后开始，确保这一步没有问题。

02—使用koa-body中间件获取上传的文件

Koa-body支持文件、json和表单格式的请求体，并且安装了koa-body

npm安装KOA-车身

设置koaBody配置参数index.js

const KOA=require(' KOA ')const KOA body=require(' KOA-body ')const path=require(' path ')const app=new KOA()app . use(KOA body({//支持文件格式multipart:true和formidable : {//上传目录uploaddir : path . join(_ _ dirname，' public/uploads ')，//保留文件扩展名keepExtensions: true，})；

接下来，改进/上传路线，获取文件，然后直接返回文件路径

Router.post ('/upload '，CTX={ const file=CTX . request . files . file CTX . body={ path : file . path } })，所以我们实际上可以上传文件并将其上传到public/uploads。让我们用邮差测试一下。

打开Postman，输入http://localhost:3001/upload，选择POST方式，选择Body要传输的文件，选择表单-数据格式，然后在KEY中选择文件类型。

然后可以选择要上传的图片。上传成功后，可以看到上传文件夹下有一张图片，并输出图片的路径。

03—使用koa静态中间件生成图像链接

其实直接返回图片的局部路径是没有用的。我们应该返回一个http链接的图片地址，点击地址查看图片。

借助koa-static中间件，我们可以创建一个静态服务，它指定一个文件夹，文件夹中的所有文件都可以通过http服务访问。

Install: npm安装koa-static并在app上注册。我们在koaBody中间件前面注册它，并将public设置为静态文件目录。

const Koastatic=require(' Koa-static ').app . use(Koastatic(path . join(_ _ dirname，' public '))

启动程序，这样公共下的文件就可以通过HTTP服务打开了。我们可以打开之前上传的图片：http://localhost 33603001/uploads/upload _ 65c1d26E5A47870cf4011aad1243fce0.png，可以直接在浏览器中显示。

然后我们转换上传路由的实现，让它生成图片链接并返回给客户端

router.post('/upload '，CTX={ const file=CTX . request . files . file const base name=path . base name(file . path)CTX . body={ ' URL ' : ` $ { CTX . origin }/uploads/$ { base name } `})

Basename可以得到文件名和扩展名，ctx.origin可以得到服务器的域名，比如localhost:3001，但是我们不能把它写死。

用Postman再次测试，可以看到返回图片的URL。点击直接打开。

04-编译前端页面上传文件

之前，我们用Postman模拟上传文件进行测试。虽然我们写的后端界面可以高效测试，但是前端的一些同学可能通常对前端页面的测试方式比较熟悉，所以我们写一个表单页面进行测试。

公开创建一个新的upload.html文件作为测试页面。

formaction='/upload '方法=' post ' enctype=' multipart/form-data '输入类型=' file' name=' file '按钮类型=' submit' upload /button/form

这是一种传统的表单提交，这样的代码在我们的实际工作中可能并不常见。action是我们提交的接口，enctype='multipart/form-data '是指定上传文件的格式。输入的name属性必须等于file，因为我们接受的字段名是file。

然后我们用HTTP服务打开这个页面：http://localhost :3001/upload . html，因为我们整个公共目录已经是一个静态的HTTP服务目录，里面的所有文件都可以通过HTTP访问。

选择文件，点击上传，可以看到上传成功后返回文件地址。

摘要

以上是边肖介绍的Koa.js中上传文件的界面功能。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！