Загрузка файлов с помощью Cloud Storage в Интернете

Cloud Storage for Firebase позволяет быстро и легко загружать файлы из корзины Cloud Storage предоставляемой и управляемой Firebase.

Создать ссылку

Чтобы загрузить файл, сначала создайте ссылку на Cloud Storage для файла, который вы хотите загрузить.

Вы можете создать ссылку, добавив дочерние пути к корню сегмента Cloud Storage , либо создать ссылку на основе существующего URL-адреса gs:// или https:// ссылающегося на объект в Cloud Storage .

Web

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

// Create a reference with an initial file path and name
const storage = getStorage();
const pathReference = ref(storage, 'images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
const gsReference = ref(storage, 'gs://bucket/images/stars.jpg');

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
const httpsReference = ref(storage, 'https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');  
storage_download_create_ref.js

Web 

// Create a reference with an initial file path and name
var storage = firebase.storage();
var pathReference = storage.ref('images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
var gsReference = storage.refFromURL('gs://bucket/images/stars.jpg');

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
var httpsReference = storage.refFromURL('https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');  
download-files.js

Загрузить данные через URL

Вы можете получить URL-адрес загрузки файла, вызвав метод getDownloadURL() для ссылки на Cloud Storage .

Web

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

const storage = getStorage();
getDownloadURL(ref(storage, 'images/stars.jpg'))
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      const blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element
    const img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });
storage_download_via_url.js

Web 

storageRef.child('images/stars.jpg').getDownloadURL()
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      var blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element
    var img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });
download-files.js

Загрузка данных напрямую из SDK

Начиная с версии 9.5 и выше, SDK предоставляет следующие функции для прямой загрузки:

Используя эти функции, вы можете обойти загрузку по URL-адресу и вместо этого вернуть данные в свой код. Это позволяет более детально контролировать доступ с помощью Firebase Security Rules .

Конфигурация CORS

Чтобы загрузить данные непосредственно в браузере, вам необходимо настроить корзину Cloud Storage для доступа из разных источников (CORS). Это можно сделать с помощью инструмента командной строки gsutil , который можно установить отсюда .

Если вам не нужны какие-либо ограничения на основе домена (наиболее распространенный сценарий), скопируйте этот JSON в файл с именем cors.json :

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Запустите gsutil cors set cors.json gs://<your-cloud-storage-bucket> чтобы применить эти ограничения.

Дополнительную информацию можно найти в документации Google Cloud Storage .

Обработка ошибок

Существует ряд причин, по которым могут возникать ошибки при загрузке, включая отсутствие файла или отсутствие у пользователя разрешения на доступ к нужному файлу. Дополнительную информацию об ошибках можно найти в разделе «Обработка ошибок» документации.

Полный пример

Полный пример загрузки с обработкой ошибок показан ниже:

Web

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

// Create a reference to the file we want to download
const storage = getStorage();
const starsRef = ref(storage, 'images/stars.jpg');

// Get the download URL
getDownloadURL(starsRef)
  .then((url) => {
    // Insert url into an <img> tag to "download"
  })
  .catch((error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/object-not-found':
        // File doesn't exist
        break;
      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 the server response
        break;
    }
  });
storage_download_full_example.js

Web 

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
starsRef.getDownloadURL()
.then((url) => {
  // Insert url into an <img> tag to "download"
})
.catch((error) => {
  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  switch (error.code) {
    case 'storage/object-not-found':
      // File doesn't exist
      break;
    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 the server response
      break;
  }
});
download-files.js

Вы также можете получать или обновлять метаданные для файлов, хранящихся в Cloud Storage .

,

Cloud Storage for Firebase позволяет быстро и легко загружать файлы из корзины Cloud Storage предоставляемой и управляемой Firebase.

Создать ссылку

Чтобы загрузить файл, сначала создайте ссылку на Cloud Storage для файла, который вы хотите загрузить.

Вы можете создать ссылку, добавив дочерние пути к корню сегмента Cloud Storage , либо создать ссылку на основе существующего URL-адреса gs:// или https:// ссылающегося на объект в Cloud Storage .

Web

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

// Create a reference with an initial file path and name
const storage = getStorage();
const pathReference = ref(storage, 'images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
const gsReference = ref(storage, 'gs://bucket/images/stars.jpg');

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
const httpsReference = ref(storage, 'https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');  
storage_download_create_ref.js

Web 

// Create a reference with an initial file path and name
var storage = firebase.storage();
var pathReference = storage.ref('images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
var gsReference = storage.refFromURL('gs://bucket/images/stars.jpg');

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
var httpsReference = storage.refFromURL('https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');  
download-files.js

Загрузить данные через URL

Вы можете получить URL-адрес загрузки файла, вызвав метод getDownloadURL() для ссылки на Cloud Storage .

Web

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

const storage = getStorage();
getDownloadURL(ref(storage, 'images/stars.jpg'))
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      const blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element
    const img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });
storage_download_via_url.js

Web 

storageRef.child('images/stars.jpg').getDownloadURL()
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      var blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element
    var img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });
download-files.js

Загрузка данных напрямую из SDK

Начиная с версии 9.5 и выше, SDK предоставляет следующие функции для прямой загрузки:

Используя эти функции, вы можете обойти загрузку по URL-адресу и вместо этого вернуть данные в свой код. Это позволяет более детально контролировать доступ с помощью Firebase Security Rules .

Конфигурация CORS

Чтобы загрузить данные непосредственно в браузере, вам необходимо настроить корзину Cloud Storage для доступа из разных источников (CORS). Это можно сделать с помощью инструмента командной строки gsutil , который можно установить отсюда .

Если вам не нужны какие-либо ограничения на основе домена (наиболее распространенный сценарий), скопируйте этот JSON в файл с именем cors.json :

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Запустите gsutil cors set cors.json gs://<your-cloud-storage-bucket> чтобы применить эти ограничения.

Дополнительную информацию можно найти в документации Google Cloud Storage .

Обработка ошибок

Существует ряд причин, по которым могут возникать ошибки при загрузке, включая отсутствие файла или отсутствие у пользователя разрешения на доступ к нужному файлу. Дополнительную информацию об ошибках можно найти в разделе «Обработка ошибок» документации.

Полный пример

Полный пример загрузки с обработкой ошибок показан ниже:

Web

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

// Create a reference to the file we want to download
const storage = getStorage();
const starsRef = ref(storage, 'images/stars.jpg');

// Get the download URL
getDownloadURL(starsRef)
  .then((url) => {
    // Insert url into an <img> tag to "download"
  })
  .catch((error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/object-not-found':
        // File doesn't exist
        break;
      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 the server response
        break;
    }
  });
storage_download_full_example.js

Web 

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
starsRef.getDownloadURL()
.then((url) => {
  // Insert url into an <img> tag to "download"
})
.catch((error) => {
  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  switch (error.code) {
    case 'storage/object-not-found':
      // File doesn't exist
      break;
    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 the server response
      break;
  }
});
download-files.js

Вы также можете получать или обновлять метаданные для файлов, хранящихся в Cloud Storage .

,

Cloud Storage for Firebase позволяет быстро и легко загружать файлы из корзины Cloud Storage предоставляемой и управляемой Firebase.

Создать ссылку

Чтобы загрузить файл, сначала создайте ссылку на Cloud Storage для файла, который вы хотите загрузить.

Вы можете создать ссылку, добавив дочерние пути к корню сегмента Cloud Storage , либо создать ссылку на основе существующего URL-адреса gs:// или https:// ссылающегося на объект в Cloud Storage .

Web

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

// Create a reference with an initial file path and name
const storage = getStorage();
const pathReference = ref(storage, 'images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
const gsReference = ref(storage, 'gs://bucket/images/stars.jpg');

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
const httpsReference = ref(storage, 'https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');  
storage_download_create_ref.js

Web 

// Create a reference with an initial file path and name
var storage = firebase.storage();
var pathReference = storage.ref('images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
var gsReference = storage.refFromURL('gs://bucket/images/stars.jpg');

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
var httpsReference = storage.refFromURL('https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');  
download-files.js

Загрузить данные через URL

Вы можете получить URL-адрес загрузки файла, вызвав метод getDownloadURL() для ссылки на Cloud Storage .

Web

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

const storage = getStorage();
getDownloadURL(ref(storage, 'images/stars.jpg'))
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      const blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element
    const img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });
storage_download_via_url.js

Web 

storageRef.child('images/stars.jpg').getDownloadURL()
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      var blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element
    var img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });
download-files.js

Загрузка данных напрямую из SDK

Начиная с версии 9.5 и выше, SDK предоставляет следующие функции для прямой загрузки:

Используя эти функции, вы можете обойти загрузку по URL-адресу и вместо этого вернуть данные в свой код. Это позволяет более детально контролировать доступ с помощью Firebase Security Rules .

Конфигурация CORS

Чтобы загрузить данные непосредственно в браузере, вам необходимо настроить корзину Cloud Storage для доступа из разных источников (CORS). Это можно сделать с помощью инструмента командной строки gsutil , который можно установить отсюда .

Если вам не нужны какие-либо ограничения на основе домена (наиболее распространенный сценарий), скопируйте этот JSON в файл с именем cors.json :

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Запустите gsutil cors set cors.json gs://<your-cloud-storage-bucket> чтобы применить эти ограничения.

Дополнительную информацию можно найти в документации Google Cloud Storage .

Обработка ошибок

Существует ряд причин, по которым могут возникать ошибки при загрузке, включая отсутствие файла или отсутствие у пользователя разрешения на доступ к нужному файлу. Дополнительную информацию об ошибках можно найти в разделе «Обработка ошибок» документации.

Полный пример

Полный пример загрузки с обработкой ошибок показан ниже:

Web

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

// Create a reference to the file we want to download
const storage = getStorage();
const starsRef = ref(storage, 'images/stars.jpg');

// Get the download URL
getDownloadURL(starsRef)
  .then((url) => {
    // Insert url into an <img> tag to "download"
  })
  .catch((error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/object-not-found':
        // File doesn't exist
        break;
      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 the server response
        break;
    }
  });
storage_download_full_example.js

Web 

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
starsRef.getDownloadURL()
.then((url) => {
  // Insert url into an <img> tag to "download"
})
.catch((error) => {
  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  switch (error.code) {
    case 'storage/object-not-found':
      // File doesn't exist
      break;
    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 the server response
      break;
  }
});
download-files.js

Вы также можете получать или обновлять метаданные для файлов, хранящихся в Cloud Storage .

,

Cloud Storage for Firebase позволяет быстро и легко загружать файлы из корзины Cloud Storage предоставляемой и управляемой Firebase.

Создать ссылку

Чтобы загрузить файл, сначала создайте ссылку на Cloud Storage для файла, который вы хотите загрузить.

Вы можете создать ссылку, добавив дочерние пути к корню сегмента Cloud Storage , либо создать ссылку на основе существующего URL-адреса gs:// или https:// ссылающегося на объект в Cloud Storage .

Web

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

// Create a reference with an initial file path and name
const storage = getStorage();
const pathReference = ref(storage, 'images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
const gsReference = ref(storage, 'gs://bucket/images/stars.jpg');

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
const httpsReference = ref(storage, 'https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');  
storage_download_create_ref.js

Web 

// Create a reference with an initial file path and name
var storage = firebase.storage();
var pathReference = storage.ref('images/stars.jpg');

// Create a reference from a Google Cloud Storage URI
var gsReference = storage.refFromURL('gs://bucket/images/stars.jpg');

// Create a reference from an HTTPS URL
// Note that in the URL, characters are URL escaped!
var httpsReference = storage.refFromURL('https://firebasestorage.googleapis.com/b/bucket/o/images%20stars.jpg');  
download-files.js

Загрузить данные через URL

Вы можете получить URL-адрес загрузки файла, вызвав метод getDownloadURL() для ссылки на Cloud Storage .

Web

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

const storage = getStorage();
getDownloadURL(ref(storage, 'images/stars.jpg'))
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    const xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      const blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element
    const img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });
storage_download_via_url.js

Web 

storageRef.child('images/stars.jpg').getDownloadURL()
  .then((url) => {
    // `url` is the download URL for 'images/stars.jpg'

    // This can be downloaded directly:
    var xhr = new XMLHttpRequest();
    xhr.responseType = 'blob';
    xhr.onload = (event) => {
      var blob = xhr.response;
    };
    xhr.open('GET', url);
    xhr.send();

    // Or inserted into an <img> element
    var img = document.getElementById('myimg');
    img.setAttribute('src', url);
  })
  .catch((error) => {
    // Handle any errors
  });
download-files.js

Загрузка данных напрямую из SDK

Начиная с версии 9.5 и выше, SDK предоставляет следующие функции для прямой загрузки:

Используя эти функции, вы можете обойти загрузку по URL-адресу и вместо этого вернуть данные в свой код. Это позволяет более детально контролировать доступ с помощью Firebase Security Rules .

Конфигурация CORS

Чтобы загрузить данные непосредственно в браузере, вам необходимо настроить корзину Cloud Storage для доступа из разных источников (CORS). Это можно сделать с помощью инструмента командной строки gsutil , который можно установить отсюда .

Если вам не нужны какие-либо ограничения на основе домена (наиболее распространенный сценарий), скопируйте этот JSON в файл с именем cors.json :

[
  {
    "origin": ["*"],
    "method": ["GET"],
    "maxAgeSeconds": 3600
  }
]

Запустите gsutil cors set cors.json gs://<your-cloud-storage-bucket> чтобы применить эти ограничения.

Дополнительную информацию можно найти в документации Google Cloud Storage .

Обработка ошибок

Существует ряд причин, по которым могут возникать ошибки при загрузке, включая отсутствие файла или отсутствие у пользователя разрешения на доступ к нужному файлу. Дополнительную информацию об ошибках можно найти в разделе «Обработка ошибок» документации.

Полный пример

Полный пример загрузки с обработкой ошибок показан ниже:

Web

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

// Create a reference to the file we want to download
const storage = getStorage();
const starsRef = ref(storage, 'images/stars.jpg');

// Get the download URL
getDownloadURL(starsRef)
  .then((url) => {
    // Insert url into an <img> tag to "download"
  })
  .catch((error) => {
    // A full list of error codes is available at
    // https://firebase.google.com/docs/storage/web/handle-errors
    switch (error.code) {
      case 'storage/object-not-found':
        // File doesn't exist
        break;
      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 the server response
        break;
    }
  });
storage_download_full_example.js

Web 

// Create a reference to the file we want to download
var starsRef = storageRef.child('images/stars.jpg');

// Get the download URL
starsRef.getDownloadURL()
.then((url) => {
  // Insert url into an <img> tag to "download"
})
.catch((error) => {
  // A full list of error codes is available at
  // https://firebase.google.com/docs/storage/web/handle-errors
  switch (error.code) {
    case 'storage/object-not-found':
      // File doesn't exist
      break;
    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 the server response
      break;
  }
});
download-files.js

Вы также можете получать или обновлять метаданные для файлов, хранящихся в Cloud Storage .