Koa.js - Datei hochladen

Webanwendungen müssen die Funktionalität bereitstellen, um das Hochladen von Dateien zu ermöglichen. Lassen Sie uns sehen, wie wir Dateien von den Clients empfangen und auf unserem Server speichern können.

Wir haben die Koa-Body-Middleware bereits zum Parsen von Anfragen verwendet. Diese Middleware wird auch zum Behandeln von Datei-Uploads verwendet. Lassen Sie uns ein Formular erstellen, mit dem wir Dateien hochladen und diese Dateien dann mit Koa speichern können. Erstellen Sie zuerst eine Vorlage mit dem Namenfile_upload.pug mit folgenden Inhalten.

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

Beachten Sie, dass Sie in Ihrem Formular denselben Codierungstyp wie oben angeben müssen. Lassen Sie uns nun diese Daten auf unserem Server verarbeiten.

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

Wenn Sie dies ausführen, erhalten Sie das folgende Formular.

Wenn Sie dies senden, erzeugt Ihre Konsole die folgende Ausgabe.

Die hochgeladenen Dateien werden im Pfad der obigen Ausgabe gespeichert. Sie können mit auf die Dateien in der Anfrage zugreifenthis.request.body.files und die Felder in dieser Anfrage von this.request.body.fields.