Koa.js - Mengupload File

Aplikasi web perlu menyediakan fungsionalitas untuk memungkinkan pengunggahan file. Mari kita lihat bagaimana kita dapat menerima file dari klien dan menyimpannya di server kita.

Kami telah menggunakan middleware koa-body untuk permintaan parsing. Middleware ini juga digunakan untuk menangani upload file. Mari kita buat formulir yang memungkinkan kita mengunggah file dan kemudian menyimpan file-file ini menggunakan Koa. Pertama buat template bernamafile_upload.pug dengan isi sebagai berikut.

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")

Perhatikan bahwa Anda perlu memberikan jenis pengkodean yang sama seperti di atas dalam formulir Anda. Sekarang mari kita tangani data ini di server kita.

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);

Saat Anda menjalankan ini, Anda mendapatkan formulir berikut.

Saat Anda mengirimkan ini, konsol Anda akan menghasilkan keluaran berikut.

File yang diunggah disimpan di jalur pada output di atas. Anda dapat mengakses file dalam permintaan menggunakanthis.request.body.files dan bidang yang diminta oleh this.request.body.fields.