File Uploading ใน Koa.js

KoaJs
Created At :
Views 👀 :

การอัปโหลดไฟล์ (File Uploading) ใน Koa.js จำเป็นต้องใช้ middleware และไลบรารีเพื่อจัดการกับการอัปโหลดไฟล์จากผู้ใช้. เราสามารถใช้ middleware koa-body ร่วมกับ multipart สำหรับการอัปโหลดไฟล์ใน Koa.js ดังนี้:

  1. ติดตั้งแพ็กเกจ koa-body:

    ใช้คำสั่ง npm เพื่อติดตั้ง koa-body:

    1
    npm install koa-body

    หรือถ้าคุณใช้ Yarn:

    1
    yarn add koa-body

  2. กำหนด middleware koa-body ในแอปพลิเคชัน Koa.js:

    ในแอปพลิเคชัน Koa.js ของคุณ, กำหนด middleware koa-body เพื่อรองรับการอัปโหลดไฟล์ และเลือกโฟลเดอร์ที่ไฟล์จะถูกบันทึก:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    const Koa = require('koa');
    const koaBody = require('koa-body');
    const path = require('path');

    const app = new Koa();

    // กำหนด middleware koa-body
    app.use(koaBody({
      multipart: true, // เปิดใช้งานการรองรับ multipart สำหรับอัปโหลดไฟล์
      formidable: {
        uploadDir: path.join(__dirname, 'uploads'), // ระบุโฟลเดอร์ที่จะบันทึกไฟล์
        keepExtensions: true, // รักษานามสกุลของไฟล์
      },
    }));

    // ตั้งค่าโฟลเดอร์สำหรับอัปโหลด
    app.use(async (ctx, next) => {
      ctx.uploadPath = path.join(__dirname, 'uploads');
      await next();
    });

    // รับการอัปโหลดไฟล์และบันทึกไฟล์
    app.use(async (ctx) => {
      const { files } = ctx.request;

      if (files && files.uploadedFile) {
        const uploadedFile = files.uploadedFile;
        const filePath = path.join(ctx.uploadPath, uploadedFile.name);
        await uploadedFile.move(filePath);

        ctx.body = `ไฟล์ ${uploadedFile.name} ถูกอัปโหลดและบันทึกเรียบร้อยแล้ว`;
      } else {
        ctx.body = 'ไม่มีไฟล์ที่อัปโหลด';
      }
    });

    app.listen(3000, () => {
      console.log('Server is running on port 3000');
    });

  3. สร้างแบบฟอร์ม HTML สำหรับอัปโหลดไฟล์:

    ในหน้า HTML ของคุณ, สร้างแบบฟอร์มสำหรับอัปโหลดไฟล์ โดยใช้ <form> และ <input type="file"> เช่น:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <!-- index.html -->
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>อัปโหลดไฟล์</title>
    </head>
    <body>
      <h1>อัปโหลดไฟล์</h1>
      <form action="/upload" method="POST" enctype="multipart/form-data">
        <input type="file" name="uploadedFile">
        <button type="submit">อัปโหลด</button>
      </form>
    </body>
    </html>

  4. เรียกใช้แอปพลิเคชัน:

    เมื่อคุณรันแอปพลิเคชัน Koa.js และเข้าที่ http://localhost:3000, คุณจะเห็นหน้าเว็บที่มีแบบฟอร์มอัปโหลดไฟล์. เมื่อคุณเลือกไฟล์และกดปุ่ม “อัปโหลด,” ไฟล์จะถูกส่งไปยังเซิร์ฟเวอร์และบันทึกในโฟลเดอร์ uploads ที่คุณได้กำหนด.

การอัปโหลดไฟล์ใน Koa.js ต้องใช้ middleware koa-body และการตั้งค่าเพื่อรองรับการอัปโหลดไฟล์และบันทึกไฟล์ในโฟลเดอร์ที่เหมาะสม. คุ

ณสามารถปรับแต่งการจัดการและบันทึกไฟล์ตามความต้องการของโปรเจกต์ของคุณ.

©2023 Love Computer