Как правильно хранить Blob в бд?

Question

[Kneepy]

Есть ссылка вида

blob:http://localhost:8080/ad028394-c137-4842-aeeb-24c74fea28de

полученная в результате new Blob([file], { type: "image/png" }); и последующего URL.createObjectURL(blob), при попытке вывести эту ссылку в img выходит ошибка

GET blob:http://localhost:8080/ad028394-c137-4842-aeeb... net::ERR_FILE_NOT_FOUND

И да, я прекрасно понимаю что даже в официальной документации написано

Сгенерированный url действителен, только пока текущий документ открыт.

Но вопрос в том что можно ли каким либо образом хранить эти файлы как ссылке без преобразования в base64

Comments

[Lynn «Кофеман»]

Видимо недостаточно прекрасно понимаете.

[Kneepy]

Lynn «Кофеман», я говорю про то что может быть существуют ещё какие либо нативные решения помимо blob и fileReader

[Lynn «Кофеман»]

Что бы хранить файл в бд его нужно отправить на сервер. А в бд можно уж хранить как угодно

[Kneepy]

Lynn «Кофеман», так я и говорю про то что blob в чистом виде не читается с сервера

[Lynn «Кофеман»]

Ну у вас же есть file. Вот его и нужно отправлять

Answer 1

[Надим]

Если дело происходит в браузере, можно файлы сохранить в IndexedDB и они там будут оставаться даже после перезагрузки страницы. Для сохранения file в IndexedDB сначала подключайте на станице библиотеку localforage:

<script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.9.0/localforage.min.js"></script>

Далее уже можно спокойно закинуть файл в память браузер вот так:

async function saveFile(file) {
    var result = await localforage.setItem('file', file);
    console.log('Файл сохранён:');
    console.dir(result);
}

Вызывайте функцию saveFile передав ему аргументом тот файл, который надо сохранить.

Чтобы потом извлечь этот файл из памяти и вставить в тег src у картинки:

async function getFile() {
    var file = await localforage.getItem('file');
    document.querySelectror('img').src = URL.createObjectURL(file);
    console.log('Файл вставлен:');
    console.dir(file);
}

Просто вызывайте функцию getFile.

Подробнее о библиотеке localforage можно почитать здесь:
https://html5.by/blog/localforage/

Выше просто примеры. Чтобы допилить под себя рекомендую ознакомится с тем, что такое промисы и чем отличаются асинхронные функции от обычных + постараться понять, как работает async / await.

Comments

[Kneepy]

Надим Закиров, этот вариант подходил бы если бы речи не шло про сохранение аватарки пользователя или отправке изображения другому пользователю, поэтому вариант с отдельной таблицей images и base64 самый простой P.S по итогу использую вариант описанный выше

[Надим]

Kneepy, если вам нужно сохранить картинку на сервере, это уже совсем другой вопрос. Для этого сначала картинку нужно отправить аяксом, далее на бэке принять и положить в базу данных.

[Kneepy]

Надим Закиров, да, это так, но в моём случае такой вариант будет требовать хранилище для отправленных файлов, а с вариантом основанном на base64 это не требуется

[Надим]

Kneepy, эм, получается вы сохраняете html-страницу целиком вместе со всеми картинками в base64?

[Kneepy]

Надим Закиров, уже никак не получается) Пришёл к сохранению файла в BLOB формате в mysql

[Надим]

Kneepy, это не правильно. Файл надо складывать куда-нибудь в папку на сервере, а в БД держать лишь ссылку на него.

Конечно, ничего страшного не случится, если вы сохраните base64 файл прям в базе, но ведь базы данных не для этого созданы.