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

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

1、安装koa-body，以实现上传图片功能

 

1	<br>npm i koa-body@4.1.0

​

注：如果之前安装了koa-bodyparser，还需要先卸载koa-bodyparser，并把所有koa-bodyparser替换成koa-body

 

1	<br>npm uninstall koa-bodyparser

 

2、安装koa-static，以实现静态资源托管，通过配置静态资源中间件，从而生成图片链接

 

1	<br>npm i koa-static@5.0.0

 

3、代码示例

 

图片上传到 /public/uploads 文件夹中。

 

后端代码示例：index.js

 

1

<br>const Koa = require('koa')<br>const app = new Koa()<br>const Router = require('koa-router')<br>const router = new Router() <br> <br>const path = require('path')<br>// 1、引入koa-body实现上传图片功能<br>const koabody = require('koa-body')<br>app.use(koabody({<br>    multipart: true, //支持图片文件<br>    formidable: {<br>        uploadDir: path.join(__dirname, '/public/uploads'), //设置上传目录<br>        keepExtensions: true, //保留拓展名<br>    }<br>}))<br> <br>// 2、引入koa-static实现生成图片链接<br>const koaStatic=require('koa-static')<br>app.use(koaStatic(path.join(__dirname, 'public')))<br>// 在浏览器使用http://localhost:3000/uploads/a0e924abb5ab8d1893b06f200.jpg可以访问图片<br>// app.use(koaStatic(path.join(__dirname, 'static'))) // 可以配置多个静态资源中间件<br> <br>// 挂载路由<br>router.get('/upload', (ctx) => { // 上传图片<br>    const file = ctx.request.files.file   //ctx.request.files.file中的file需要与前端使用的名称保持一致<br>    const basename = path.basename(file.path) //传入绝对路径返回的basename为文件名称+拓展名<br>    ctx.body = {<br>         url:`${ctx.origin}/uploads/${basename}` //ctx.origin为http://localhost:3000<br>   }<br>})<br> <br>// 注册路由中间件<br>app.use(router.routes())<br> <br>app.listen(3000)

 

 前端代码示例：/public/uploadpic.html

 

1	<br><form action="/upload" enctype="multipart/form-data" method="post"><br>    <input type="file" name="file" accept="image/png image/jpg"><br>    <button type="submit">上传图片</button><br></form>

 

以上就是在线直播系统源码，Node.js中使用Koa实现上传图片功能， 更多内容欢迎关注之后的文章