Как получить File() или Blob() из URL в JavaScript?
Я пытаюсь загрузить изображение в Firebase Storage по URL (с помощью ref().put(file)
, например, www.example.com/img.jpg).
Для этого мне нужен объект типа File или Blob, но когда я пытаюсь использовать new File(url)
, мне выдает ошибку "недостаточно аргументов".
EDIT: На самом деле я хочу загрузить целую папку файлов, поэтому не могу загрузить их через консоль.
3 ответ(ов)
Ответ @James верный, но он не совместим со всеми браузерами. Вы можете попробовать это решение на jQuery:
$.get('blob:yourbloburl').then(function(data) {
var blob = new Blob([data], { type: 'audio/wav' });
});
Обратите внимание, что для работы этого кода необходимо, чтобы у вас была подключена библиотека jQuery. Также учтите, что использование URL типа "blob" может иметь ограничения по совместимости в разных браузерах.
Это не сработало, пока я не добавил учетные данные. Вот как я это сделал:
fetch(url, {
headers: {
"Content-Type": "application/octet-stream",
},
credentials: 'include'
})
Добавление параметра credentials: 'include'
решило проблему с CORS и позволило отправить запрос с необходимыми учетными данными.
Вот перевод вашего кода на русский язык с объяснением, соответствующим стилю ответа на 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
, которая выполняет следующие шаги:
- Получение данных: Использует
fetch
для получения данных из URL, переданного в качестве аргумента. - Преобразование в Blob: После успешного получения данных, они преобразуются в объект Blob с помощью метода
.blob()
. - Копирование в буфер обмена: Затем Blob добавляется в буфер обмена с помощью
navigator.clipboard.write
, что позволяет, например, пользователю вставить этот Blob в другое место. - Обработка ошибок: В случае возникновения ошибки, она будет выведена в консоль с указанием названия и сообщения об ошибке.
Не забудьте, что для успешной работы с буфером обмена могут потребоваться определенные права доступа или выполнение кода в контексте пользовательского взаимодействия (например, по клику).
Кодирование URL в JavaScript
Получение значений из параметров "GET" (JavaScript)
Ошибка "Кросс-доменные запросы поддерживаются только для HTTP" при загрузке локального файла
Проверьте, является ли строка в JavaScript URL-адресом
Можно ли задать имя файла объекта PDF, отображаемого в Chrome?