0

Как получить File() или Blob() из URL в JavaScript?

11

Я пытаюсь загрузить изображение в Firebase Storage по URL (с помощью ref().put(file), например, www.example.com/img.jpg).

Для этого мне нужен объект типа File или Blob, но когда я пытаюсь использовать new File(url), мне выдает ошибку "недостаточно аргументов".

EDIT: На самом деле я хочу загрузить целую папку файлов, поэтому не могу загрузить их через консоль.

3 ответ(ов)

0

Ответ @James верный, но он не совместим со всеми браузерами. Вы можете попробовать это решение на jQuery:

$.get('blob:yourbloburl').then(function(data) {
  var blob = new Blob([data], { type: 'audio/wav' });
});

Обратите внимание, что для работы этого кода необходимо, чтобы у вас была подключена библиотека jQuery. Также учтите, что использование URL типа "blob" может иметь ограничения по совместимости в разных браузерах.

0

Это не сработало, пока я не добавил учетные данные. Вот как я это сделал:

fetch(url, {
      headers: {
        "Content-Type": "application/octet-stream",
      },
      credentials: 'include'
 })

Добавление параметра credentials: 'include' решило проблему с CORS и позволило отправить запрос с необходимыми учетными данными.

0

Вот перевод вашего кода на русский язык с объяснением, соответствующим стилю ответа на StackOverflow:

async function url2blob(url) {
  try {
    // Получаем данные с указанного URL
    const data = await fetch(url);
    // Преобразуем ответ в объект Blob
    const blob = await data.blob();
    // Сохраняем Blob в буфер обмена
    await navigator.clipboard.write([
      new ClipboardItem({
        [blob.type]: blob
      })
    ]);
    console.log("Успешно.");
  } catch (err) {
    // Обрабатываем возможные ошибки
    console.error(err.name, err.message);
  }
}

В этом коде определена асинхронная функция url2blob, которая выполняет следующие шаги:

  1. Получение данных: Использует fetch для получения данных из URL, переданного в качестве аргумента.
  2. Преобразование в Blob: После успешного получения данных, они преобразуются в объект Blob с помощью метода .blob().
  3. Копирование в буфер обмена: Затем Blob добавляется в буфер обмена с помощью navigator.clipboard.write, что позволяет, например, пользователю вставить этот Blob в другое место.
  4. Обработка ошибок: В случае возникновения ошибки, она будет выведена в консоль с указанием названия и сообщения об ошибке.

Не забудьте, что для успешной работы с буфером обмена могут потребоваться определенные права доступа или выполнение кода в контексте пользовательского взаимодействия (например, по клику).

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь