วิธีอัปโหลดรูปภาพไปยังที่เก็บข้อมูล firebase & บันทึก URL ของรูปภาพนั้นในฐานข้อมูล firestore ใน React + Firebase

เมื่อเร็ว ๆ นี้ฉันติดอยู่กับการใช้งานเล็กน้อยในขณะที่ทำงานกับแบบฟอร์มการลงทะเบียนใน react & firebase ซึ่งฉันต้องการบันทึก URL ของรูปภาพที่อัปโหลดในเอกสารของฐานข้อมูล firestore
ลองสำรวจในบทความนี้

TL;DR
มาดูการสาธิตของเรากัน:

การดำเนินการ:

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

• วัสดุ-ui (คุณสามารถใช้กรอบ css ใดก็ได้ที่คุณเลือก)
• ฐานไฟ

ตอนนี้เราจะส่งออกเอนทิตีบางอย่าง เช่น แอป การตรวจสอบสิทธิ์ และวัตถุที่เก็บข้อมูล และจะใช้ประโยชน์จากสิ่งเหล่านี้ใน app.js ของเรา

มาดูแกนกลางของไฟล์หลักกันก่อน เรามีองค์ประกอบอินพุต material-ui และรวมไว้ในตัวจัดการเหตุการณ์ handleSubmit
ตอนนี้เราจะมาดูกันอย่างใกล้ชิดว่าเราสามารถบันทึก URL ของรูปภาพที่อัปโหลดในฐานข้อมูล firestore ได้อย่างไรเพื่อให้เข้าถึงได้ทั่วโลก:

• ขั้นตอนที่ 1: จัดเก็บรูปภาพที่อัปโหลดในที่เก็บข้อมูล:
  ขั้นแรก เราสร้างการอ้างอิงถึงที่เก็บข้อมูลรูปภาพของเราชื่อ storageRef และส่งต่อไปยังฟังก์ชันuploadBytesResumable ซึ่งยอมรับการอ้างอิงนี้และไฟล์ที่จำเป็นในการอัปโหลด สำหรับขั้นตอนโดยละเอียดเพิ่มเติม โปรดดูที่นี่
• ขั้นตอนที่ 2: การจัดเก็บรูปภาพนี้เป็น URL ในฐานข้อมูล firestore:
  เราสร้างการอ้างอิงทั่วไปไปยัง firestore ของเราชื่อ collectionRef ซึ่งใช้ 3 พารามิเตอร์ ได้แก่ วัตถุ dbชื่อคอลเลกชัน และสุดท้ายคือรหัสเอกสาร ไปที่แอปพลิเคชันของคุณ ที่นี่เพื่อความเรียบง่าย ฉันได้ฮาร์ดโค้ดรหัสเอกสาร
  จากนั้นเรามีเหตุการณ์uploadTask.on()ซึ่งมีฟังก์ชันการโทรกลับ ซึ่งเราใช้ฟังก์ชัน getDownloadURL ตามสัญญา และได้ URL ของรูปภาพในตัวแปร downloadURL มา
  ถึงส่วนสำคัญที่เราใส่ url นี้ในเอกสารของเราโดยใช้ ฟังก์ชัน updateDoc (โปรดทราบว่าเราสามารถใช้ ฟังก์ชัน setDoc ได้แต่เราใช้updateDocเนื่องจากเราต้องการอัปเดตบางฟิลด์ของเอกสารโดยไม่ต้องเขียนทับทั้งเอกสาร

แค่นั้นแหละ หากคุณมีข้อโต้แย้งหรือต้องการความช่วยเหลือเพิ่มเติม โปรดติดต่อฉัน ขอบคุณที่อ่าน