Javascript: Как сохранить расположение файла в локальном хранилище? - PullRequest
Новая
       34

Javascript: Как сохранить расположение файла в локальном хранилище?

0 голосов
/ 02 мая 2018

В Javascript (w / Angular 2+) у меня есть приложение, в котором я пытаюсь сохранить dataURl в localalstorage, как только он был выбран пользователем. В настоящее время я пробовал следующий код, но при получении я получаю пустой объект obj {} в качестве тела.

HTML 

<input style="display:none;" type="file" (change)="fileEvent($event)" #file>

Угловая функция хранения и поиска файлов 

fileEvent(ev: any): void {
    console.log('Event select file', ev);    
    let obj: any = ev.target.files[0];
    let file: File = {
      Key: obj.name,
      ContentType: obj.type,
      Size: obj.size,
      Body: obj      
    };
    localStorage.setItem("myapp", JSON.stringify(file);
}

getFileFromLocalStorage {
     console.log(JSON.parse(localStorage.getItem("myapp"));
}

Ответ на получение файла ниже

enter image description here

1 Ответ

0 голосов
/ 02 мая 2018

Вы не можете хранить изображения непосредственно в местном хранилище, как это. Сначала вам нужно конвертировать изображение в Base64. Затем сохраните строку Base64 в значении localStorage.

Ниже приведена функция для преобразования изображения в Base64: 

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);

    var dataURL = canvas.toDataURL("image/png");

    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

Теперь вы можете сохранить это в локальном хранилище.

Вот справочный ответ на SO.

...