1 Тема від jenmikitenko

  • jenmikitenko
  • Новий користувач
  • Поза форумом
  • Дата реєстрації: 14.12.2022
  • Повідомлень: 2
    • Репутація: 0

Тема: BLOB зображення у БД

Допоможіть будь ласка

Маю таку задачу
Використовуючи бібліотеку 'https://github.com/jakearchibald/idb' створіть об'єкт сховища у БД з
картинками. На сторінці розмістіть картинку та кнопки (стільки, скільки буде завантажено у БД).
У кожної картинки у сховищі має бути src (BLOB формат), alt, description, link.
Користувач може при натисканні на кнопки в розмітці вибирати потрібні картинки після
чого в розмітці динамічно змінюється зображення, а також посилання на нього для переходу в
браузері та опис (під самою картинкою).
І ось моє рішення, воно не повне і скоріш за все не вірне

<input type="file" name="" id="">
<button id="saveimg">Save in BD</button>
<div id="clickthis">
    <button id="one" data-all="1">1</button>
    <button class="two" data-all="2">2</button>
    <button class="three" data-all="3">3</button>
</div>
<img src="" alt=''>
<script src='./IDB.js'></script>
<script>
    let count=0;
    let db=idb.open("Gallery",1,(upgradeDB)=>{
    let photo=upgradeDB.createObjectStore("Nature")
        photo.createIndex('Tel', 'tel', {
            unique: true
        });
        photo.createIndex('Sex', 'sex', {
            unique: false
        });
    })
    .then((db)=>{
        document.querySelector("#saveimg").addEventListener("click",function(){
            count++;
            let File = document.querySelector('input').files[0]
            let transaction=db.transaction("Nature","readwrite")
            let store=transaction.objectStore("Nature") 
            let blobUpload = new Blob([file], {type: 'image/jpg'},)
            console.log(blobUpload)
            store.put(blobUpload, count);
        })
    })
    document.querySelector("#clickthis").addEventListener("click",function(e){
        let bs=idb.open("Gallery",1)
        .then((db)=>{
            let order=Number(e.target.getAttribute("data-all"))
            let transaction=db.transaction("Nature","readonly");
            let store=transaction.objectStore("Nature");
            console.log(order)
            return store.get(order)
        })
        .then((pic)=> {
            let blobObj=pic;
            console.log(blobObj)
            let imgUrl=URL.createObjectURL(blobObj);
            document.querySelector("img").setAttribute("src",imgUrl)
            console.log(imgUrl)
        })
    })

Я хотів добавити картинку через

let img=new Image();
image.src="cars1.jpg"

але справа в тому що таким методом картинка не записується, в blob файлі її після такого немає - тобто як в коді внести картинку в БД вручну а не переносячи файл в input?Ну і ізза цього нюансу я не розумію тоді як внести туди , alt, description, link.  Допомжіть з вирішення завдання

2 Відповідь від frz

  • frz
  • frz
  • Data / DB Engineer
  • Поза форумом
  • Звідки: PL
  • Дата реєстрації: 28.12.2019
  • Повідомлень: 6 802

Re: BLOB зображення у БД

GPT-4 написав:

Для того, щоб додати до кожної картинки в базі даних alt, description та link, вам потрібно змінити структуру об'єктів, які зберігаються в сховищі. Замість зберігання Blob як значення, ви можете зберігати об'єкт, який містить всі потрібні властивості. Щоб зробити це, спочатку додайте поля для введення alt, description та link до HTML-розмітки:

<label for="alt">Alt:</label>
<input type="text" id="alt" name="alt">
<label for="description">Description:</label>
<input type="text" id="description" name="description">
<label for="link">Link:</label>
<input type="text" id="link" name="link">

Тепер змініть функцію обробника подій для кнопки "Save in BD", щоб зберігати об'єкт з потрібними властивостями замість Blob:

document.querySelector("#saveimg").addEventListener("click",function(){
    count++;
    let file = document.querySelector('input[type="file"]').files[0];
    let alt = document.querySelector('#alt').value;
    let description = document.querySelector('#description').value;
    let link = document.querySelector('#link').value;
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function() {
        let imgData = {
            src: reader.result,
            alt: alt,
            description: description,
            link: link
        };
        let transaction = db.transaction("Nature", "readwrite");
        let store = transaction.objectStore("Nature");
        store.put(imgData, count);
    };
});

Тепер змініть обробник подій для кнопок вибору картинки, щоб він динамічно змінював зображення, alt, description та link на сторінці:

document.querySelector("#clickthis").addEventListener("click", function(e) {
    idb.open("Gallery", 1)
        .then((db) => {
            let order = Number(e.target.getAttribute("data-all"));
            let transaction = db.transaction("Nature", "readonly");
            let store = transaction.objectStore("Nature");
            return store.get(order);
        })
        .then((pic) => {
            let img = document.querySelector("img");
            img.setAttribute("src", pic.src);
            img.setAttribute("alt", pic.alt);
            
            let descriptionContainer = document.getElementById("description-container");
            if (!descriptionContainer) {
                descriptionContainer = document.createElement("div");
                descriptionContainer.id = "description-container";
                img.parentNode.insertBefore(descriptionContainer, img.nextSibling);
            }
            descriptionContainer.textContent = pic.description;

            let linkContainer = document.getElementById("link-container");
            if (!linkContainer) {
                linkContainer = document.createElement("a");
                linkContainer.id = "link-container";
                descriptionContainer.parentNode.insertBefore(linkContainer, descriptionContainer.nextSibling);
            }

frz вебсайт