Koa.js-파일 업로드

웹 애플리케이션은 파일 업로드를 허용하는 기능을 제공해야합니다. 클라이언트로부터 파일을 받아 서버에 저장하는 방법을 살펴 보겠습니다.

요청 구문 분석을 위해 이미 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 = koa();

//Set up Pug
var Pug = require('koa-pug');
var pug = new Pug({
   viewPath: './views',
   basedir: './views',
   app: app 
});

//Set up body parsing middleware
app.use(bodyParser({
   formidable:{uploadDir: './uploads'},    //This is where the files would come
   multipart: true,
   urlencoded: true
}));

var _ = router(); //Instantiate the router

_.get('/files', renderForm);
_.post('/upload', handleForm);

function * renderForm(){
   this.render('file_upload');
}

function *handleForm(){
   console.log("Files: ", this.request.body.files);
   console.log("Fields: ", this.request.body.fields);
   this.body = "Received your data!"; //This is where the parsed request is stored
}

app.use(_.routes()); 
app.listen(3000);

이것을 실행하면 다음과 같은 양식이 표시됩니다.

이것을 제출하면 콘솔이 다음 출력을 생성합니다.

업로드 된 파일은 위 출력의 경로에 저장됩니다. 다음을 사용하여 요청의 파일에 액세스 할 수 있습니다.this.request.body.files 및 해당 요청의 필드 this.request.body.fields.