วิธีตั้งค่าการอัพโหลดรูปภาพง่ายๆด้วย Node และ AWS S3

คำแนะนำทีละขั้นตอนอธิบายวิธีอัปโหลดรูปภาพหรือไฟล์ใด ๆ ไปยังบริการ Amazon S3

นี่เป็นส่วนแรกของบทช่วยสอนที่เราจะจัดการกับส่วนเซิร์ฟเวอร์ (Node.js) ของโค้ด

ฉันเตรียมวิดีโอสอนบน YouTube ด้วย คุณสามารถพบลิงค์ในแหล่งข้อมูลที่ด้านล่างของบทความนี้

1. สิ่งที่เราต้องติดตั้งและคำอธิบายสั้น ๆ

Multer:มิดเดิลแวร์สำหรับจัดการไฟล์ข้อมูล ส่วนใหญ่ใช้สำหรับการอัปโหลดไฟล์ ข้อมูลเพิ่มเติม: Npm Link

Multer-s3:ส่วนขยาย Multer สำหรับการอัปโหลดไฟล์ไปยังบริการ Amazon S3 ได้อย่างง่ายดาย ข้อมูลเพิ่มเติม: Npm Link

aws-sdk:แพ็คเกจที่จำเป็นในการทำงานกับ AWS (Amazon Web Services) ในกรณีของเราบริการ S3 ข้อมูลเพิ่มเติม: Npm Link

ไปที่โครงการของคุณและมาติดตั้งแพ็คเกจกัน:

npm install —-save multer multer-s3 aws-sdk

2. สมัครใช้งาน AWS

ก่อนอื่นมาสร้างบัญชีบน //aws.amazon.com Amazon เสนอชั้นฟรีที่น่าทึ่งที่คุณสามารถใช้ได้เป็นปีที่ 1 หลังจากเข้าสู่ระบบค้นหาบริการ S3

พูดง่ายๆก็คือ S3 คือบริการคลาวด์ในการจัดเก็บไฟล์

เราจำเป็นต้องสร้างถัง คุณสามารถจินตนาการถึงที่เก็บข้อมูลเป็นโฟลเดอร์สำหรับไฟล์ของคุณ เลือกชื่อถังและภาค เนื่องจากนี่เป็นการตั้งค่าที่เรียบง่ายเราจึงไม่สนใจการกำหนดค่าอื่น ๆ (การตั้งค่าเริ่มต้นก็ใช้ได้ - หากมีบางอย่างไม่ชัดเจนให้ถามในความคิดเห็น) คลิก“ ถัดไป ” จนกว่าคุณจะเข้าสู่การตรวจสอบและสร้างที่เก็บข้อมูลของคุณ

นำทางไปยังถังที่สร้างขึ้นของคุณและตรวจสอบของคุณแถบ URL จำชื่อที่เก็บข้อมูลของคุณ(สำหรับฉัน "การทดสอบระดับกลาง") และภูมิภาค (สำหรับฉัน "us-east")

ตอนนี้เราจำเป็นต้องได้รับของเราข้อมูลประจำตัวที่เชื่อถือได้ ไปที่ชื่อบัญชีของคุณเพื่อไปที่“ my security credentials ” จากนั้น“ คีย์การเข้าถึง ” และสร้างการเข้าถึงใหม่ที่สำคัญ

อย่าแบ่งปันกุญแจของคุณกับใคร! บันทึกคีย์เหล่านี้ชั่วคราวลงในไฟล์บางไฟล์หรือดาวน์โหลดไฟล์คีย์เนื่องจากเราต้องการคีย์เพื่อตั้งค่าการอัปโหลดไฟล์

เอาล่ะ. การตั้งค่า Amazon เสร็จสิ้น!

3. ไปที่ตัวแก้ไขการเข้ารหัสของคุณ

ฉันจะไม่อธิบายพื้นฐานของ Node หรือ Express ที่นี่ บทช่วยสอนนี้เน้นเฉพาะการอัปโหลดไฟล์ หากคุณสนใจในการดำเนินโครงการทั้งหมดให้ตรวจสอบที่เก็บ GitHub ของฉันหรือดูบทแนะนำแบบเต็ม (คุณสามารถดูลิงก์ได้ที่ส่วนท้ายของบล็อกโพสต์นี้)

  1. สร้างบริการอัปโหลดไฟล์ของคุณด้วยการใช้งานต่อไปนี้ (ส่วนแรก):

หมายเหตุสำคัญ:อย่าเปิดเผยข้อมูลรับรองลับของคุณโดยตรงในไฟล์! อย่าเปิดเผยข้อมูลลับของคุณ! พิจารณาตั้งค่าตัวแปรสภาพแวดล้อมในสภาพแวดล้อมท้องถิ่นของคุณหรือในกรณีของโครงการที่ปรับใช้ตัวแปรในผู้ให้บริการระบบคลาวด์ของคุณ ทางออกที่ดีที่สุดคือการใช้aws-profiles : //docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/loading-node-credentials-shared.html

อันดับแรกเรากำลังนำเข้าแพ็คเกจที่ติดตั้งทั้งหมดของเรา สองส่วนคือการกำหนดค่า AWS เราจำเป็นต้องให้รหัสลับและภูมิภาคจากแถบ URL ที่ฉันแสดงให้คุณเห็นก่อนหน้านี้

หลังจากการกำหนดค่า AWS เราสามารถสร้างอินสแตนซ์ของ Amazon S3 ของเราได้ เรายังไม่ค่อยเรียบร้อย ตอนนี้เรามาดูส่วนที่สองของการใช้งานนี้

ตอนนี้เราสามารถตั้งค่าโซลูชันสำหรับการอัปโหลดแบบ Multer เราจำเป็นต้องจัดเตรียมฟังก์ชันให้กับวัตถุ Multer ด้วยคุณสมบัติดังต่อไปนี้

  1. s3 : อินสแตนซ์ของ Amazon S3 ที่เราสร้างขึ้นก่อนหน้านี้
  2. ที่เก็บข้อมูล : ชื่อที่เก็บข้อมูลของเรา (ในกรณีของฉัน: "การทดสอบปานกลาง")
  3. acl : การควบคุมการเข้าถึงไฟล์ ('การอ่านสาธารณะ' หมายความว่าทุกคนสามารถดูไฟล์ได้) คุณสามารถตรวจสอบประเภทที่มีอยู่ทั้งหมดได้ที่นี่: ลิงก์ amazon
  4. metada : ฟังก์ชันโทรกลับเพื่อตั้งค่าข้อมูลเมตาของไฟล์ที่อัปโหลด นี่ผมกำลังตั้งค่าข้อมูลเมตาเพิ่มเติมสำหรับfieldname คุณสามารถดูข้อมูลนี้ได้จากภาพร้อง

5. คีย์:ฟังก์ชั่นการโทรกลับเพื่อตั้งค่าคุณสมบัติของคีย์ (ภายใต้คีย์ไฟล์ของคุณจะถูกบันทึกไว้ในที่เก็บข้อมูลของคุณ) ในกรณีของเราเรากำลังทำการประทับเวลาปัจจุบันและบันทึกไฟล์นี้ภายใต้ชื่อนี้ วิธีนี้ชื่อไฟล์ของเราจะไม่ซ้ำกันเสมอ แต่คุณสามารถเลือกชื่ออะไรก็ได้ที่คุณต้องการ

หลังจากการตั้งค่าทั้งหมดเรากำลังส่งออกออบเจ็กต์อัพโหลดเพื่อใช้ในไฟล์อื่น ๆ

4. ตั้งค่าเส้นทางเพื่ออัพโหลดภาพ

เกือบเสร็จแล้ว แต่ผู้ใช้แอปของเรายังไม่สามารถเข้าถึงการอัปโหลดรูปภาพได้ เราจำเป็นต้องเปิดเผยฟังก์ชันนี้ให้กับพวกเขา มาสร้างจุดสิ้นสุดเพื่อบันทึกไฟล์

เรากำลังส่งออกออบเจ็กต์อัปโหลดของเราที่เราได้สร้างไว้ก่อนหน้านี้และสร้างขึ้นมาใหม่ คนใหม่ที่เฉพาะเจาะจงมากขึ้นกับการกำหนดค่าเพิ่มเติมสำหรับการอัปโหลดภาพเดียว เรากำลังให้คุณค่า ' ภาพ ' ให้กับมัน ค่านี้มีความสำคัญมากเนื่องจากเราจะส่งไฟล์ของเราไปยังเซิร์ฟเวอร์ภายใต้คีย์นี้

ส่วนที่สองคือเส้นทางนั่นเอง POST endpoint เป็น " / image-upload " ภายในที่เราเรียกsingleUpload อย่าลืมส่งผ่าน req และ resเนื่องจาก multer จะได้รับไฟล์ที่เราส่งไปยังเซิร์ฟเวอร์จากออบเจ็กต์ req

เรากำลังตรวจสอบข้อผิดพลาด หากมีใครที่เราจะส่ง JSON กลับมาพร้อมกับค่าของตำแหน่งไฟล์ของเราซึ่งเป็นเพียงURL ไปยังไฟล์บนอเมซอน

เอาล่ะ! เราสามารถอัพโหลดไฟล์ไปยัง Amazon S3 ได้ทันที ค่อนข้างเรียบง่ายคุณคิดอย่างไร?

5. มาทดสอบกันในบุรุษไปรษณีย์

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

หากคุณไม่มีบุรุษไปรษณีย์คุณสามารถดาวน์โหลดเป็นส่วนขยายของ Google Chrome เพียงค้นหา ' postman google chrome extension ' Postman เป็นแอปพลิเคชั่นสำหรับเริ่มต้นส่งและทดสอบคำขอไปยังเซิร์ฟเวอร์ในเรื่องง่ายๆ

  1. ส่งคำขอโพสต์ไปยังปลายทางที่เราสร้างไว้ก่อนหน้านี้ ในกรณีของฉันฉันระบุในเส้นทางของโหนด/ ภาพอัปโหลด
  2. เลือกตัวถังของรูปแบบข้อมูล
  3. ระบุคีย์ของรูปภาพ คุณจะสังเกตเห็นว่านี่คือคีย์ที่เราตั้งค่าไว้ก่อนในโค้ดของเรา ตรวจสอบไฟล์และเลือกไฟล์จากคอมพิวเตอร์ของคุณ
  4. ส่งคำขอร้อง

คุณควรเรียกคืน JSON พร้อม URL ของไฟล์ที่คุณอัปโหลด

โวล่า! นั่นมันพวก นี่คือการอัปโหลดไฟล์อย่างง่ายสำหรับ Node ในบทความถัดไปฉันจะดำเนินการต่อด้วยการใช้งานส่วนหน้าสำหรับ Angular

หากคุณชอบบทช่วยสอนนี้โปรดตรวจสอบหลักสูตรเต็มของฉันใน Udemy - The Complete Angular, React & Node Guide | แอพสไตล์ Airbnb

การบรรยายวิดีโอ:วิดีโอ Youtube

โครงการที่เสร็จสมบูรณ์: ที่เก็บ github ของฉัน

ไชโย

Filip