当前位置: 首页> 财经> 产业 > 广州网站建设案件_平面图网站_全国疫情一览表_整站seo技术搜索引擎优化

广州网站建设案件_平面图网站_全国疫情一览表_整站seo技术搜索引擎优化

时间:2025/7/9 21:13:25来源:https://blog.csdn.net/qq_63358859/article/details/144174843 浏览次数:0次
广州网站建设案件_平面图网站_全国疫情一览表_整站seo技术搜索引擎优化

目录

环境准备

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

使用 Postman 测试

使用 koa-static 中间件生成图片链接

编写前端页面上传文件


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

环境准备

首先当然是要初始化一个Koa项目了,安装 Koa、koa-router 即可。

npm install koa koa-router

设置图片上传目录,把图片上传到指定的目录中,在 app 路径下新建 upload 文件夹,目录结构如下:

koa-upload/
--app
----index.js
--upload
--package.json

编写 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:3000')
});

然后启动,确保这一步没有问题。

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

koa-body 支持文件、json、form格式的请求体,安装 koa-body

npm install koa-body

设置 koaBody 配置参数,index.js

const koa = require('koa')
const koaBody = require('koa-body')
const path = require('path')
const app = new koa()// 解析body
app.use(koaBody({multipart: true, // 支持文件上传(会挂载ctx.request.files)// 文件上传配置formidable: {uploadDir: path.join(__dirname, "../upload"), // 上传目录(不能使用相对路径,不会相对于当前路径,而是process.cwd()的执行路径)keepExtensions: true, // 保留文件扩展名},parsedMethods: ["POST", "PUT", "PATCH", "DELETE"], // 只解析这些方法的body})
);

接下来完善 /upload 路由,获取文件,然后直接返回文件路径

  async upload(ctx, next) {const { file } = ctx.request.files;const fileTypes = ["image/jpeg", "image/png"];try {// 判断文件类型if (!fileTypes.includes(file.mimetype)) {return ctx.app.emit("error", fileTypeError, ctx);}// 上传文件if (file) {ctx.body = {code: 0,message: "上传成功",result: {goods_img: path.basename(file.filepath), // (basename 返回路径koa的最后一部分)},};} else {return ctx.app.emit("error", fileError, ctx);}} catch (error) {console.log(error);}}

这样我们其实已经可以进行文件上传,并把文件上传到 /upload 中了,我们用 Postman 来测试一下。

使用 Postman 测试

打开 Postman,输入http://localhost:9999/goods/upload选择 POST 方法,并且选择文件用 Body 来传输,并且选择 form-data 格式,然后在 KEY 中选择 file类型。

 

然后就可以选择图片进行上传了,上传成功后就可以看到 upload 文件夹下有利一个图片了,并且输出量图片的路径。

使用 koa-static 中间件生成图片链接

直接返回图片的本地路径在实际上是没什么用的,我们应该返回一个http链接的图片地址,点击地址就可以查看图片。

借助 koa-static 中间件可以帮助我们生成一个静态服务,它指定一个文件夹,文件夹下所有的文件都可以通过 http服务来访问。

安装:npm install koa-static 并注册到 app 上,我们把他注册在 koaBody 中间件的前面,把 upload 设置为静态文件目录。

const koaStatic = require('koa-static')
... ...
app.use(koaStatic(path.join(__dirname, 'upload')))

启动程序,这样 upload 下的文件就可以使用HTTP服务来大开了,我们可以打开之前上传的图片:http://localhost:9999/0828c9ced04cca10ac07adc01.png可以在浏览器中直接显示了。

编写前端页面上传文件

前面我们用 Postman 模拟了上传文件进行测试,虽然可以高效的测试我们编写的后端接口,但是我们前端有些同学可能通常更熟悉前端页面的方式测试,那么我们来写一个表单页面来测试。

在 test 中新建 upload.html 文件作为测试页面。

    <form action="http://localhost:9999/goods/upload" method="post" enctype="multipart/form-data"><input type="file" name="file" /><button type="submit">上传</button></form>

这是传统的表单提交,我们实际工作中这样的代码可能已经不常见了,action 就是我们的提交到的接口,enctype="multipart/form-data" 就是指定上传文件格式。input 的 name 属性一定要等于file,因为我们接受的字段名是 file。

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

 

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

关键字:广州网站建设案件_平面图网站_全国疫情一览表_整站seo技术搜索引擎优化

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: