อัปโหลดไฟล์ด้วย Cloud Storage บน Flutter

Cloud Storage for Firebase ช่วยให้คุณอัปโหลดไฟล์ไปยัง ระบุที่เก็บข้อมูล Cloud Storage แล้ว และจัดการโดย Firebase

อัปโหลดไฟล์

หากต้องการอัปโหลดไฟล์ไปยัง Cloud Storage ก่อนอื่นคุณต้องสร้างข้อมูลอ้างอิง เส้นทางแบบเต็มของไฟล์ รวมถึงชื่อไฟล์

// Create a storage reference from our app
final storageRef = FirebaseStorage.instance.ref();

// Create a reference to "mountains.jpg"
final mountainsRef = storageRef.child("mountains.jpg");

// Create a reference to 'images/mountains.jpg'
final mountainImagesRef = storageRef.child("images/mountains.jpg");

// While the file names are the same, the references point to different files
assert(mountainsRef.name == mountainImagesRef.name);
assert(mountainsRef.fullPath != mountainImagesRef.fullPath);

เมื่อคุณสร้างข้อมูลอ้างอิงที่เหมาะสมแล้ว ให้คุณเรียกเมธอด putFile(), putString() หรือ putData() วิธีการอัปโหลดไฟล์ ไปยัง Cloud Storage

คุณไม่สามารถอัปโหลดข้อมูลที่มีการอ้างอิงไปยังรากของ ที่เก็บข้อมูล Cloud Storage ข้อมูลอ้างอิงต้องชี้ไปยัง URL ย่อย

อัปโหลดจากไฟล์

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

Directory appDocDir = await getApplicationDocumentsDirectory();
String filePath = '${appDocDir.absolute}/file-to-upload.png';
File file = File(filePath);

try {
  await mountainsRef.putFile(file);
} on firebase_core.FirebaseException catch (e) {
  // ...
}

อัปโหลดจากสตริง

คุณสามารถอัปโหลดข้อมูลเป็นข้อมูลดิบ, base64, base64url หรือ data_url ที่เข้ารหัส โดยใช้เมธอด putString() เช่น หากต้องการอัปโหลดสตริงข้อความ เข้ารหัสเป็น URL ข้อมูล:

String dataUrl = 'data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==';

try {
  await mountainsRef.putString(dataUrl, format: PutStringFormat.dataUrl);
} on FirebaseException catch (e) {
  // ...
}

การอัปโหลดข้อมูลดิบ

คุณสามารถอัปโหลดข้อมูลที่พิมพ์ในระดับต่ำกว่าได้ในรูปแบบ Uint8List สำหรับกรณีที่การอัปโหลดสตริงหรือ File ไม่สามารถใช้งานได้ ด้วยวิธีนี้ กล่องสำหรับกรณี ให้เรียกเมธอด putData() ที่มีข้อมูลของคุณ

try {
  // Upload raw data.
  await mountainsRef.putData(data);
} on firebase_core.FirebaseException catch (e) {
  // ...
}

ดู URL สำหรับดาวน์โหลด

หลังจากอัปโหลดไฟล์แล้ว คุณสามารถดู URL สำหรับดาวน์โหลดไฟล์ได้โดยโทรหา เมธอด getDownloadUrl() ใน Reference:

await mountainsRef.getDownloadURL();

เพิ่มข้อมูลเมตาของไฟล์

นอกจากนี้ยังใส่ข้อมูลเมตาเมื่ออัปโหลดไฟล์ได้อีกด้วย ข้อมูลเมตานี้มีพร็อพเพอร์ตี้ข้อมูลเมตาของไฟล์โดยทั่วไป เช่น contentType (โดยทั่วไปจะเรียกว่าประเภท MIME) เมธอด putFile() อนุมานประเภท MIME จากส่วนขยาย File โดยอัตโนมัติ แต่คุณสามารถ ลบล้างประเภทที่ตรวจพบอัตโนมัติด้วยการระบุ contentType ในข้อมูลเมตา ถ้า คุณไม่ได้ระบุ contentType และ Cloud Storage ไม่สามารถอนุมาน Cloud Storage จะใช้ค่าเริ่มต้นจากนามสกุลไฟล์ application/octet-stream. โปรดดูใช้ข้อมูลเมตาของไฟล์

try {
  await mountainsRef.putFile(file, SettableMetadata(
    contentType: "image/jpeg",
  ));
} on firebase_core.FirebaseException catch (e) {
  // ...
}

จัดการการอัปโหลด

นอกจากการเริ่มอัปโหลดแล้ว คุณยังสามารถหยุดชั่วคราว ดำเนินการต่อ และยกเลิกการอัปโหลดได้โดยใช้ เมธอด pause(), resume() และ cancel() หยุดกิจกรรมชั่วคราวและเล่นต่อ เพิ่มการเปลี่ยนแปลงสถานะ pause และ progress ตามลำดับ การยกเลิก การอัปโหลดทำให้การอัปโหลดล้มเหลวโดยมีข้อผิดพลาดที่ระบุว่า การอัปโหลดถูกยกเลิก

final task = mountainsRef.putFile(largeFile);

// Pause the upload.
bool paused = await task.pause();
print('paused, $paused');

// Resume the upload.
bool resumed = await task.resume();
print('resumed, $resumed');

// Cancel the upload.
bool canceled = await task.cancel();
print('canceled, $canceled');

ตรวจสอบความคืบหน้าในการอัปโหลด

คุณสามารถฟังสตรีมเหตุการณ์ของงานเพื่อจัดการความสำเร็จ ความล้มเหลว ความคืบหน้า หรือการหยุดชั่วคราวใน งานการอัปโหลด:

ประเภทเหตุการณ์ การใช้งานทั่วไป
TaskState.running ส่งออกเป็นระยะๆ เมื่อมีการโอนข้อมูล และสามารถใช้เพื่อสร้างตัวบ่งชี้การอัปโหลด/ดาวน์โหลด
TaskState.paused ส่งออกเมื่อใดก็ตามที่งานหยุดชั่วคราว
TaskState.success ส่งเมื่องานเสร็จเรียบร้อยแล้ว
TaskState.canceled ส่งออกเมื่อใดก็ตามที่ยกเลิกงาน
TaskState.error ส่งเมื่ออัปโหลดไม่สำเร็จ กรณีนี้อาจเกิดจากการหมดเวลาของเครือข่าย การให้สิทธิ์ไม่สำเร็จ หรือคุณยกเลิกงาน 
mountainsRef.putFile(file).snapshotEvents.listen((taskSnapshot) {
  switch (taskSnapshot.state) {
    case TaskState.running:
      // ...
      break;
    case TaskState.paused:
      // ...
      break;
    case TaskState.success:
      // ...
      break;
    case TaskState.canceled:
      // ...
      break;
    case TaskState.error:
      // ...
      break;
  }
});

การจัดการข้อผิดพลาด

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

ตัวอย่างแบบเต็ม

ตัวอย่างแบบเต็มของการอัปโหลดที่มีการตรวจสอบความคืบหน้าและการจัดการข้อผิดพลาด แสดงอยู่ด้านล่าง

final appDocDir = await getApplicationDocumentsDirectory();
final filePath = "${appDocDir.absolute}/path/to/mountains.jpg";
final file = File(filePath);

// Create the file metadata
final metadata = SettableMetadata(contentType: "image/jpeg");

// Create a reference to the Firebase Storage bucket
final storageRef = FirebaseStorage.instance.ref();

// Upload file and metadata to the path 'images/mountains.jpg'
final uploadTask = storageRef
    .child("images/path/to/mountains.jpg")
    .putFile(file, metadata);

// Listen for state changes, errors, and completion of the upload.
uploadTask.snapshotEvents.listen((TaskSnapshot taskSnapshot) {
  switch (taskSnapshot.state) {
    case TaskState.running:
      final progress =
          100.0 * (taskSnapshot.bytesTransferred / taskSnapshot.totalBytes);
      print("Upload is $progress% complete.");
      break;
    case TaskState.paused:
      print("Upload is paused.");
      break;
    case TaskState.canceled:
      print("Upload was canceled");
      break;
    case TaskState.error:
      // Handle unsuccessful uploads
      break;
    case TaskState.success:
      // Handle successful uploads on complete
      // ...
      break;
  }
});

เมื่อคุณอัปโหลดไฟล์แล้ว ต่อไปมาดูวิธีดาวน์โหลดไฟล์เหล่านั้นกัน จาก Cloud Storage