Javascript: Как сохранить местоположение файла в локальном хранилище?
В Javascript (с Angular 2+) у меня есть приложение, в котором я пытаюсь сохранить dataURl в localstorage после того, как он был выбран пользователем. В настоящее время я пробовал следующий код, но при извлечении я получаю пустой объект obj {} в качестве тела.
HTML
<input style = "display:none;" type = "file" (change) = "fileEvent($event)" #file>
Функция хранения и поиска файлов Angular
fileEvent(ev: any): void {
console.info('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.info(JSON.parse(localStorage.getItem("myapp"));
}
Ответ на получение файла ниже
Возможный дубликат Как получить полный путь к выбранному файлу при изменении <input type = ‘file’> с помощью javascript, jquery-ajax?
Вам нужен IndexedDB, использование которого значительно упрощается библиотекой Mozilla местный фураж. Но мне даже интересно, нет ли у Angular собственной оболочки для IndexedDB, но я совершенно невежественен, когда речь идет об Angular ...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы не можете хранить изображение напрямую в локальном хранилище, как это. Для начала вам нужно преобразовать изображение в 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.
Не храните изображение в localStorage, localStorage не предназначен для хранения двоичных данных. Вместо этого используйте IndexedDB, который предназначен для этой задачи и сможет сохранить файл как файл. И не используйте холст для преобразования файла изображения в b64, вместо этого используйте FileReader.
Спасибо за это, я попробую холст. @Kaiido, если вы предложите FileReader, как мне это сделать? Ps Я использую плагин, который будет отдавать приоритет IndexedDB над локальным хранилищем.
Здесь есть одна опечатка
localStorage.setItem("myapp", JSON.stringify(file);, закрывающая скобка)отсутствует