在线直播系统源码,Node.js中使用Koa实现上传图片功能
在线直播系统源码,Node.js中使用Koa实现上传图片功能
1、安装koa-body,以实现上传图片功能
npm i koa-body@4.1.0
注:如果之前安装了koa-bodyparser,还需要先卸载koa-bodyparser,并把所有koa-bodyparser替换成koa-body
npm uninstall koa-bodyparser
2、安装koa-static,以实现静态资源托管,通过配置静态资源中间件,从而生成图片链接
npm i koa-static@5.0.0
3、代码示例
图片上传到 /public/uploads 文件夹中。
后端代码示例:index.js
const Koa = require('koa')
const app = new Koa()
const Router = require('koa-router')
const router = new Router()
const path = require('path')
// 1、引入koa-body实现上传图片功能
const koabody = require('koa-body')
app.use(koabody({
multipart: true, //支持图片文件
formidable: {
uploadDir: path.join(__dirname, '/public/uploads'), //设置上传目录
keepExtensions: true, //保留拓展名
}
}))
// 2、引入koa-static实现生成图片链接
const koaStatic=require('koa-static')
app.use(koaStatic(path.join(__dirname, 'public')))
// 在浏览器使用http://localhost:3000/uploads/a0e924abb5ab8d1893b06f200.jpg可以访问图片
// app.use(koaStatic(path.join(__dirname, 'static'))) // 可以配置多个静态资源中间件
// 挂载路由
router.get('/upload', (ctx) => { // 上传图片
const file = ctx.request.files.file //ctx.request.files.file中的file需要与前端使用的名称保持一致
const basename = path.basename(file.path) //传入绝对路径返回的basename为文件名称+拓展名
ctx.body = {
url:`${ctx.origin}/uploads/${basename}` //ctx.origin为http://localhost:3000
}
})
// 注册路由中间件
app.use(router.routes())
app.listen(3000)
前端代码示例:/public/uploadpic.html
<form action="/upload" enctype="multipart/form-data" method="post">
<input type="file" name="file" accept="image/png image/jpg">
<button type="submit">上传图片</button>
</form>
以上就是在线直播系统源码,Node.js中使用Koa实现上传图片功能, 更多内容欢迎关注之后的文章