KoaJS 上传文件

  • 定义和使用

    Web 应用程序需要提供允许文件上传的功能。让我们看看如何从客户端接收文件并将其存储在服务器上。
  • 示例

    我们已经使用了 koa-body 中间件来解析请求。这个中间件也用于处理文件上传。让我们创建一个表单,允许我们上传文件,然后使用 Koa 保存这些文件。
    首先创建一个名为 file_upload.pug 包括以下内容。
    html
        head
            title File uploads
        body
            form(action = "/upload" method = "POST" enctype = "multipart/form-data")
                div
                    input(type = "text" name = "name" placeholder = "Name")
                
                div
                    input(type = "file" name = "image")
                
                div
                    input(type = "submit")
    
    请注意,您需要在表单中提供与上面相同的编码类型。现在让我们在服务器上处理这些数据。
    var koa = require('koa');
    var router = require('koa-router'); //实例化路由器
    var bodyParser = require('koa-body');
    var app = new koa();
    
    var _router = router();   //实例化路由器
    var Pug = require('koa-pug');
    var pug = new Pug({
        viewPath: './views',
        basedir: './views',
        app: app 
    });
    
    app.use(bodyParser({
        formidable:{uploadDir: './uploads'},
        multipart: true,
        urlencoded: true
    }));
        
    _router.get('/files', async (ctx)=>{
        await ctx.render('file_upload');
    });
    
    _router.post('/upload', async (ctx)=>{
        console.log("Files: ", ctx.request.files);
        console.log("name: ", ctx.request.body.name);
        ctx.body = "Received your data!"; //这是存储已解析请求的位置
    });
    app.use(_router.routes());  //使用路由器定义的路由
    
    app.listen(3001);
    
    现在转到 http://localhost:3001/files 运行此程序时,将得到以下表单。
    pug
    当您提交此文件时,您的控制台将生成以下输出。
    pug
    上传的文件存储在上述输出的路径中。您可以使用访问请求中的文件 ctx.request.files 和该请求中的字段 ctx.request.body