Koa2处理文件上传

最新推荐文章于 2024-01-02 14:29:30 发布

原创最新推荐文章于 2024-01-02 14:29:30 发布 · 3.6k 阅读

2 ·

CC 4.0 BY-SA版权

node 专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何利用Koa2和koa-multer中间件处理前端上传的文件，实现文件保存并返回保存路径及参数。通过设置自定义文件名和目录，结合静态服务器，使得上传的文件可以被外部访问。

背景：通过Koa2实现文件上传处理，1. 接收和处理前端提交的文件 2.返回文件的访问路径以及相应的参数

目的：保存前端上传的文件，并返回相应的参数和保存文件的访问地址

解决方案：1. 使用koa-multer实现文件上传并自定义文件名和目录 2. 通过静态服务器实现外部访问

一、前端部分（index.ejs文件）

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>图片上传</title>
</head>
<body>
<%= title %>
<form action="/upload" method="POST"  enctype="multipart/form-data">
    <p>姓名：</p>
    <input type="text" name="stuName"><br>
    <p>学号：</p>
    <input type="text" name="stuNo"><br>
    <p>爱好：</p>
    <input type="text" name="hobby"><br>

    <p>选择文件</p>
    <input type="file" name="file"><br>
    <br>
    <input type="submit">
</form>

</body>
</html>

大致效果：

二、Koa部分主要代码（serve.js文件）

const Koa = require('koa');
const multer=require('koa-multer');
const Router=require('koa-router');
const views=require('koa-views');
const serve = require('koa-static');
const path=require('path');
const app=new Koa();

//加载模板引擎
app.use(views(path.join(__dirname,'./views'),{
    extension:'ejs'
}));

const router=new Router()
router.get('/',async (ctx,next)=>{
    let title = '文件上传';
    await ctx.render('index', {
        title
    })
});

// 1.主页静态网页 把静态页统一放到public中管理
const home   = serve(path.join(__dirname)+'/public/');


//配置
var storage = multer.diskStorage({
    //文件保存路径
    destination: function (req, file, cb) {
        cb(null, 'public/upload/')
    },
    //修改文件名称
    filename: function (req, file, cb) {
        var fileFormat = (file.originalname).split(".");  //以点分割成数组，数组的最后一项就是后缀名
        cb(null,req.body.stuName + "." + fileFormat[fileFormat.length - 1]);
    }
});

//加载配置
var upload = multer({ storage: storage });
//路由
router.post('/upload',upload.single('file'),async(ctx,next)=>{
    // 请求的参数为
    // var param = ctx.req.body;

    // 获取保存的路径
    // var path = ctx.req.file;

    var path = ctx.req.file.path.split('/')
    path =  path[1] + '/' + path[2];
    var port = ctx.req.headers.host.split(':')[1]
    ctx.body = {
        filename: ctx.req.file.filename,//返回文件名
        url:'http://' + ctx.req.headers.host+ '/' + path // 返回访问路径
    }
});

app.use(router.routes(), router.allowedMethods())
app.use(home);

app.listen(3000,()=>{
    console.log('Server is running at port 3000...')
});

返回结果：

{"filename":"jason.jpeg","url":"http://localhost:3000/upload/jason.jpeg"}