在线直播系统源码,Node.js中使用Koa实现上传图片功能

发布时间 2023-04-18 14:15:13作者: 云豹科技-苏凌霄

在线直播系统源码,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实现上传图片功能, 更多内容欢迎关注之后的文章