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.