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

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

อัปโหลดไฟล์

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

Web

import { getStorage, ref } from "firebase/storage";

// Create a root reference
const storage = getStorage();

// Create a reference to 'mountains.jpg'
const mountainsRef = ref(storage, 'mountains.jpg');

// Create a reference to 'images/mountains.jpg'
const mountainImagesRef = ref(storage, 'images/mountains.jpg');

// While the file names are the same, the references point to different files
mountainsRef.name === mountainImagesRef.name;           // true
mountainsRef.fullPath === mountainImagesRef.fullPath;   // false 
storage_upload_ref.js

Web

// Create a root reference
var storageRef = firebase.storage().ref();

// Create a reference to 'mountains.jpg'
var mountainsRef = storageRef.child('mountains.jpg');

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

// While the file names are the same, the references point to different files
mountainsRef.name === mountainImagesRef.name;           // true
mountainsRef.fullPath === mountainImagesRef.fullPath;   // false 
upload-files.js

อัปโหลดจาก Blob หรือ File

เมื่อสร้างการอ้างอิงที่เหมาะสมแล้ว ให้เรียกใช้uploadBytes()วิธี uploadBytes() รับไฟล์ผ่าน JavaScript File และ Blob API แล้วอัปโหลดไปยัง Cloud Storage

Web

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'some-child');

// 'file' comes from the Blob or File API
uploadBytes(storageRef, file).then((snapshot) => {
  console.log('Uploaded a blob or file!');
});
storage_upload_blob.js

Web

// 'file' comes from the Blob or File API
ref.put(file).then((snapshot) => {
  console.log('Uploaded a blob or file!');
});
upload-files.js

อัปโหลดจากอาร์เรย์ไบต์

นอกจากประเภท File และ Blob แล้ว uploadBytes() ยังอัปโหลด Uint8Array ไปยัง Cloud Storage ได้ด้วย

Web

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'some-child');

const bytes = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x2c, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21]);
uploadBytes(storageRef, bytes).then((snapshot) => {
  console.log('Uploaded an array!');
});
storage_upload_bytes.js

Web

var bytes = new Uint8Array([0x48, 0x65, 0x6c, 0x6c, 0x6f, 0x2c, 0x20, 0x77, 0x6f, 0x72, 0x6c, 0x64, 0x21]);
ref.put(bytes).then((snapshot) => {
  console.log('Uploaded an array!');
});
upload-files.js

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

หากไม่มี Blob, File หรือ Uint8Array คุณสามารถใช้เมธอด uploadString() เพื่ออัปโหลดสตริงที่เข้ารหัส base64, base64url หรือ data_url ในรูปแบบไฟล์ดิบไปยัง Cloud Storage

Web

import { getStorage, ref, uploadString } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'some-child');

// Raw string is the default if no format is provided
const message = 'This is my message.';
uploadString(storageRef, message).then((snapshot) => {
  console.log('Uploaded a raw string!');
});

// Base64 formatted string
const message2 = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message2, 'base64').then((snapshot) => {
  console.log('Uploaded a base64 string!');
});

// Base64url formatted string
const message3 = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message3, 'base64url').then((snapshot) => {
  console.log('Uploaded a base64url string!');
});

// Data URL string
const message4 = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
uploadString(storageRef, message4, 'data_url').then((snapshot) => {
  console.log('Uploaded a data_url string!');
});
storage_upload_string.js

Web

// Raw string is the default if no format is provided
var message = 'This is my message.';
ref.putString(message).then((snapshot) => {
  console.log('Uploaded a raw string!');
});

// Base64 formatted string
var message = '5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64').then((snapshot) => {
  console.log('Uploaded a base64 string!');
});

// Base64url formatted string
var message = '5b6p5Y-344GX44G-44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'base64url').then((snapshot) => {
  console.log('Uploaded a base64url string!');
});

// Data URL string
var message = 'data:text/plain;base64,5b6p5Y+344GX44G+44GX44Gf77yB44GK44KB44Gn44Go44GG77yB';
ref.putString(message, 'data_url').then((snapshot) => {
  console.log('Uploaded a data_url string!');
});
upload-files.js

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

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

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

Web

import { getStorage, ref, uploadBytes } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'images/mountains.jpg');

// Create file metadata including the content type
/** @type {any} */
const metadata = {
  contentType: 'image/jpeg',
};

// Upload the file and metadata
const uploadTask = uploadBytes(storageRef, file, metadata);
storage_upload_metadata.js

Web

// Create file metadata including the content type
var metadata = {
  contentType: 'image/jpeg',
};

// Upload the file and metadata
var uploadTask = storageRef.child('images/mountains.jpg').put(file, metadata);
upload-files.js

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

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

Web

import { getStorage, ref, uploadBytesResumable } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'images/mountains.jpg');

// Upload the file and metadata
const uploadTask = uploadBytesResumable(storageRef, file);

// Pause the upload
uploadTask.pause();

// Resume the upload
uploadTask.resume();

// Cancel the upload
uploadTask.cancel();
storage_manage_uploads.js

Web

// Upload the file and metadata
var uploadTask = storageRef.child('images/mountains.jpg').put(file);

// Pause the upload
uploadTask.pause();

// Resume the upload
uploadTask.resume();

// Cancel the upload
uploadTask.cancel();
upload-files.js

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

ขณะอัปโหลด งานอัปโหลดอาจส่งเหตุการณ์ความคืบหน้าในstate_changed observer เช่น

ประเภทเหตุการณ์ การใช้งานทั่วไป
running เหตุการณ์นี้จะทริกเกอร์เมื่องานเริ่มหรืออัปโหลดต่อ และมักใช้ร่วมกับเหตุการณ์ pause สําหรับการอัปโหลดขนาดใหญ่ เหตุการณ์นี้อาจทริกเกอร์หลายครั้งเป็นการอัปเดตความคืบหน้า
pause เหตุการณ์นี้จะทริกเกอร์ทุกครั้งที่มีการหยุดการอัปโหลดชั่วคราว และมักใช้ร่วมกับเหตุการณ์ running

เมื่อเกิดเหตุการณ์ ระบบจะส่งออบเจ็กต์ TaskSnapshot กลับ ภาพรวมนี้เป็นการดูงานที่เปลี่ยนแปลงไม่ได้ ณ เวลาที่เกิดเหตุการณ์ ออบเจ็กต์นี้มีพร็อพเพอร์ตี้ต่อไปนี้

พร็อพเพอร์ตี้ ประเภท คำอธิบาย
bytesTransferred Number จํานวนไบต์ทั้งหมดที่โอนเมื่อถ่ายภาพนี้
totalBytes Number จำนวนไบต์ทั้งหมดที่คาดว่าจะอัปโหลด
state firebase.storage.TaskState สถานะปัจจุบันของการอัปโหลด
metadata firebaseStorage.Metadata ข้อมูลเมตาที่ส่งไปยังเซิร์ฟเวอร์ก่อนที่จะอัปโหลดเสร็จสมบูรณ์ หลังจากอัปโหลดเสร็จแล้ว ข้อมูลเมตาที่เซิร์ฟเวอร์ส่งกลับ
task firebaseStorage.UploadTask งานที่เป็นสแนปชอตนี้ ซึ่งสามารถใช้เพื่อ "หยุดชั่วคราว" "ทำงานต่อ" หรือ "ยกเลิก" งาน
ref firebaseStorage.Reference ข้อมูลอ้างอิงที่มาของงาน

การเปลี่ยนแปลงสถานะเหล่านี้เมื่อรวมกับพร็อพเพอร์ตี้ของ TaskSnapshot จะทําให้การตรวจสอบเหตุการณ์การอัปโหลดเป็นเรื่องง่ายแต่มีประสิทธิภาพ

Web

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const storage = getStorage();
const storageRef = ref(storage, 'images/rivers.jpg');

const uploadTask = uploadBytesResumable(storageRef, file);

// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed', 
  (snapshot) => {
    // Observe state change events such as progress, pause, and resume
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case 'paused':
        console.log('Upload is paused');
        break;
      case 'running':
        console.log('Upload is running');
        break;
    }
  }, 
  (error) => {
    // Handle unsuccessful uploads
  }, 
  () => {
    // Handle successful uploads on complete
    // For instance, get the download URL: https://firebasestorage.googleapis.com/...
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
      console.log('File available at', downloadURL);
    });
  }
);
storage_monitor_upload.js

Web

var uploadTask = storageRef.child('images/rivers.jpg').put(file);

// Register three observers:
// 1. 'state_changed' observer, called any time the state changes
// 2. Error observer, called on failure
// 3. Completion observer, called on successful completion
uploadTask.on('state_changed', 
  (snapshot) => {
    // Observe state change events such as progress, pause, and resume
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
    }
  }, 
  (error) => {
    // Handle unsuccessful uploads
  }, 
  () => {
    // Handle successful uploads on complete
    // For instance, get the download URL: https://firebasestorage.googleapis.com/...
    uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
      console.log('File available at', downloadURL);
    });
  }
);
upload-files.js

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

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

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

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

Web

import { getStorage, ref, uploadBytesResumable, getDownloadURL } from "firebase/storage";

const storage = getStorage();

// Create the file metadata
/** @type {any} */
const metadata = {
  contentType: 'image/jpeg'
};

// Upload file and metadata to the object 'images/mountains.jpg'
const storageRef = ref(storage, 'images/' + file.name);
const uploadTask = uploadBytesResumable(storageRef, file, metadata);

// Listen for state changes, errors, and completion of the upload.
uploadTask.on('state_changed',
  (snapshot) => {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case 'paused':
        console.log('Upload is paused');
        break;
      case 'running':
        console.log('Upload is running');
        break;
    }
  }, 
  (error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/unauthorized':
        // User doesn't have permission to access the object
        break;
      case 'storage/canceled':
        // User canceled the upload
        break;

      // ...

      case 'storage/unknown':
        // Unknown error occurred, inspect error.serverResponse
        break;
    }
  }, 
  () => {
    // Upload completed successfully, now we can get the download URL
    getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
      console.log('File available at', downloadURL);
    });
  }
);
storage_upload_handle_error.js

Web

// Create the file metadata
var metadata = {
  contentType: 'image/jpeg'
};

// Upload file and metadata to the object 'images/mountains.jpg'
var uploadTask = storageRef.child('images/' + file.name).put(file, metadata);

// Listen for state changes, errors, and completion of the upload.
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, // or 'state_changed'
  (snapshot) => {
    // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
    var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
    console.log('Upload is ' + progress + '% done');
    switch (snapshot.state) {
      case firebase.storage.TaskState.PAUSED: // or 'paused'
        console.log('Upload is paused');
        break;
      case firebase.storage.TaskState.RUNNING: // or 'running'
        console.log('Upload is running');
        break;
    }
  }, 
  (error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/unauthorized':
        // User doesn't have permission to access the object
        break;
      case 'storage/canceled':
        // User canceled the upload
        break;

      // ...

      case 'storage/unknown':
        // Unknown error occurred, inspect error.serverResponse
        break;
    }
  }, 
  () => {
    // Upload completed successfully, now we can get the download URL
    uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
      console.log('File available at', downloadURL);
    });
  }
);
upload-files.js

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