Koa.js 文件上传

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 Pug = require('koa-pug');

var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app //等价于 app.use(pug)
});

var _ = router(); // 实例化路由器

app.use(bodyParser({
   formidable:{uploadDir: './uploads'},
   multipart: true,
   urlencoded: true
}));


_.get('/files', async (ctx,next) => {
   await ctx.render('file_upload');
});
_.post('/upload', (ctx,next) => {
   console.log("Files: ", ctx.request.files);
   console.log("Fields: ", ctx.request.fields);
   ctx.body = "Received your data!"; // 这是存储已解析请求的位置
});

app.use(_.routes()); // 使用由 router 定义的路由
app.listen(3000);

当你运行该服务，并访问时，你会得到下面的内容。

当提交此内容时，我们的控制台将产生以下输出。

上传的文件存储在上述输出的路径中。 我们可以使用 this.request.body.files 访问请求中的文件，并通过 this.request.body.fields 访问该请求中的字段。