น้องแมวอยากอัพรุปกับเขาบ้าง Upload ยังไงอะ

สวัสดีครับหลายคนลงทำ backend คงหนีไม่พ้นการ upload file รูปภาพใช่ไหมครับ วันนี้ผมอยากชวนกันมาทำ uploadfile image โดยใช้เจ้าตัว nestjs เนี่ยแหละครับในการ upload

ก่อนจะเริ่ม upload สร้าง nest ก่อนนะ

nest new image-upload

ลง dependency กันหน่อยครับ ถ้าใครใช้ nodejs มาก่อนคงได้ยินเจ้าตัวนี้ครับ multer เจ้าตัวนี้เป็นตัวช่วยในการนำก็อบปี้ไฟล์ภาพเรามาเก็บไว้ในเซิฟครับ ให้เรา npm install ได้เลยครับ

npm i -D @types/multer

ทำ upload กัน

จากนั้นมาที่ app.controller.ts ครับแล้วใส่โค๊ดนี้ลงไป

เป็นการบอกว่า key ชื่อว่า file จะถูกส่งมา เป็นข้อมูลชนิด file ครับ เมื่อลอง request ดูจะในรูปแบบประมาณนี้ครับ

{
  fieldname: 'file',
  originalname: '1_cZXAov35eTfE545EiuGFqQ.png',
  encoding: '7bit',
  mimetype: 'image/png',
  buffer: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 02 e4 00 00 01 68 04 03 00 00 00 ed 10 f3 68 00 00 00 1b 50 4c 54 45 47 70 4c e4 23 49 e4 22 48 ... 6272 more bytes>,
  size: 6322
}

ถ้าอยากจะส่งแบบหลายไฟล์หละทำยังไง

จะเปลี่ยน จาก คำว่า FileInterceptor -> FilesInterceptor แค่นี้ครับบอกว่ามันส่งมาได้หลายไฟล์ แล้ว type ที่เรา รับใน controller ก็จะเป็น Array เหมือนในโค๊ดครับ ส่วนผลลัพธ์ก็จะเป็นแบบด้านล่างครับ

[
  {
    fieldname: 'file',
    originalname: '1_cZXAov35eTfE545EiuGFqQ.png',
    encoding: '7bit',
    mimetype: 'image/png',
    buffer: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 02 e4 00 00 01 68 04 03 00 00 00 ed 10 f3 68 00 00 00 1b 50 4c 54 45 47 70 4c e4 23 49 e4 22 48 ... 6272 more bytes>,
    size: 6322
  },
  {
    fieldname: 'file',
    originalname: '3-3.png',
    encoding: '7bit',
    mimetype: 'image/png',
    buffer: <Buffer 89 50 4e 47 0d 0a 1a 0a 00 00 00 0d 49 48 44 52 00 00 03 20 00 00 01 90 08 06 00 00 00 56 25 04 34 00 00 00 09 70 48 59 73 00 00 0b 12 00 00 0b 12 01 ... 36483 more bytes>,
    size: 36533
  },
  ...
]

ไม่เห็นจะเก็บรูปไว้ในเซิฟเลย

ใช่ครับ ที่มันไม่เก็บรูปไว้ให้เพราะว่าเรายังไม่ได้ config ว่า ให้ รูปที่ส่งมานำไปเก็บไว้ไหนครับ ให้มาที่ app.module.ts แล้วเพิ่มโค๊ดนี้ลงไปใน imports ครับ

เย้ได้แล้ว... พอลองอัพแล้วจะภาพตามด้านบนนี้

จากโค๊ดจะมี 3 อย่างหลักๆที่ต้องเข้าใจคือ

• diskStorage เป็นตัวบอกว่าให้เก็บลงใน disk ของเซิฟนั้นก็คือ folder upload นั้นเองครับ
• destination เมื่อเราสร้าง instance ของ diskstorage จะต้องโยน function ตัวนี้ไป ซึ่งเป็นตัวบอกว่าต้องไป store ลงใน folder ไหนนั่นเอง
• filename ตัวนี้เป็นการเปลี่ยนชื่อไฟล์แล้วค่อยเก็บลงไปใน folder เพื่อป้องกันไม่ให้ภาพซ้ำเมื่อเราลงรูปภาพไปครับซึ่ง ชื่อไฟล์จะเชื่อมด้วย current date ไม่มีทางที่จะซ้ำหรอกครับ

เพียงเท่านี้เราก็ได้ upload รูปลงแล้วแต่ว่าถ้าเราจะดึงรูปหละ request ไปว่า

GET http://127.0.0.1:3000/upload/file-1623085442996-178912774.jpg

{
    "statusCode": 404,
    "message": "Cannot GET /public/upload/file-1623085442996-178912774.jpg",
    "error": "Not Found"
}

ผลลัพธ์ที่ได้คือ 404 ครับเพราะมันไม่รู้จัก route นี้เลยซึ่งเราต้องทำให้ folder เป็น static ก่อนครับถึงจะสามารถดึงรูปมาได้โดยเพิ่มไปที่ main.ts ครับเพิ่มโค๊ดข้างล่างเข้าไปแล้วลองดึงใหม่ครับ

บทนี้ก็พากันมาอัพรูปลง disk แบบเบสิกยังมีวิธีเก็บรูปอีกหลายแบบสามารถไปศึกษาต่อกันนะครับแล้วอย่าลืมมาแชร์เจ้าของบทความด้วยนะครับ วันนี้ขอลาไปแล้วครับ ขอให้สนุกกับการทำหลังบ้านโดยใช้ nestjs ครับ สวัสดีครับ

Documentation | NestJS - A progressive Node.js framework

Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Progamming), FP (Functional Programming), and FRP (Functional Reactive Programming).

Documentation | NestJS - A progressive Node.js framework

expressjs/multer

Node.js middleware for handling `multipart/form-data`. - expressjs/multer

GitHubexpressjs

personal-by-molysulfur/uploadfile-image-nestjs

Contribute to personal-by-molysulfur/uploadfile-image-nestjs development by creating an account on GitHub.

GitHubpersonal-by-molysulfur