Я хочу просто сохранить изображение, PDF-файл или файл любого типа в локальном хранилище.
Итак, есть ли способ сохранить файл в LocalStorage?
Как сохранить ФАЙЛ в локальном хранилище в Angular (2 и выше)
27.01.2018
- если бы вы только могли преобразовать его в строку. 27.01.2018
- я знаю, но как сохранить и как получить это из локального хранилища, о чем я вас прошу 29.01.2018
- @OmkarJadhav ты смог это решить? 07.08.2018
- Нет... Я использую другой способ хранения файла, но не в локальном хранилище, я использовал сервис для хранения этого изображения в составном файле. @lads 08.08.2018
Ответы:
1
Вот автономный сервис, который работает на Angular 6/7/8.
Он загружает, сохраняет и извлекает файл в локальном хранилище.
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';
import { map, flatMap } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class OcFileStorageService {
//#region Lifecycle methods
constructor(private httpSvc: HttpClient) { }
//#endregion Lifecycle methods
//#region Exposed methods
/**
* Tries to retrieve base64 file from local storage.
* If doesn't exist, downloads stores and retrieves the file again.
* @param key Key to search in storage
* @param urlIfNotExist Url which will be downloaded if key wasn't found
* @returns Observable of base64 data url string with the file inside
*/
public getStoredFile(key: string, urlIfNotExist: string): Observable<string> {
const storedFile = this.getFromStorage(key);
if (storedFile) {
return this.objectToObserver<string>(storedFile);
} else {
return this.downloadDataAsBase64(urlIfNotExist).pipe(
map((b64Result: string) => {
this.saveToStorage(key, b64Result);
return b64Result;
})
);
}
}
//#region Exposed methods
//#region Storage methods
private saveToStorage(key: string, b64Result: string) {
localStorage.setItem(key, b64Result);
}
private getFromStorage(key: string) {
return localStorage.getItem(key);
}
//#endregion Storage methods
//#region Downloader methods
private downloadAsBlob(url: string) {
return this.httpSvc.get(url, { responseType: 'blob' });
}
private downloadDataAsBase64(url: string): Observable<string> {
return this.downloadAsBlob(url).pipe(
flatMap(blob => {
return this.blobToBase64(blob).pipe(
map((b64Result: string) => {
return b64Result;
})
);
})
);
}
//#endregion Downloader methods
//#region Util methods
private blobToBase64(blob: Blob): Observable<{}> {
const fileReader = new FileReader();
const observable = new Observable(observer => {
fileReader.onloadend = () => {
observer.next(fileReader.result);
observer.complete();
};
});
fileReader.readAsDataURL(blob);
return observable;
}
private objectToObserver<T>(storedFile: T): Observable<T> {
return new Observable<T>(observer => {
observer.next(storedFile);
observer.complete();
});
}
//#region Util methods
}
Использование довольно простое:
constructor(private ocFileStorageSvc: OcFileStorageService) {}
ngOnInit() {
this.ocFileStorageSvc
.getStoredFile('quokka', 'https://pbs.twimg.com/media/DR15b9eWAAEn7eo.jpg')
.subscribe((base64Data: string) => {
this.quokkaImageData = base64Data;
});
}
И здесь есть демонстрация на всякий случай.
10.03.2019
2
Преобразуйте файл в какую-либо строковую кодировку (Base 64) и сохраните его как строку.
https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
27.01.2018
var reader = new FileReader(); reader.readAsDataURL(YOUR_FILE_HERE); reader.onload = function () { // do something with reader.result }
30.01.2018 Новые материалы
Прогресс в технологии Трансформеров часть 3
Многомасштабный управляющий сигнальный преобразователь для бесфазного синтеза движения (arXiv)
Автор: Линтао Ван , Кун Ху , Лей Бай , Юй Дин , Ваньли Оуян , Чжиюн Ван .
Аннотация:..
Представляем поддержку компонентов Vue.js. Мгновенный HMR и многое другое.
Хотя у FuseBox уже был плагин Vue, он был базовым и не имел многих функций, которые делали работу с Vue.js такой приятной. Однако с этим выпуском мы рады сообщить, что в FuseBox..
Приключения в Javascript, часть 1
Я продолжаю думать о том, чтобы писать больше, но чем больше я думаю об этом, тем меньше я это делаю. Итак, сегодня я перестал думать и начал писать.
Отсюда можно только спускаться…
В..
Понимание дженериков в TypeScript: подробное руководство
Введение
TypeScript, строго типизированный надмножество JavaScript, хорошо известен своей способностью улучшать масштабируемость, удобочитаемость и ремонтопригодность приложений. Одной из..
Учебные заметки JavaScript Object Oriented Labs
Вот моя седьмая неделя обучения программированию. После ruby и его фреймворка rails я начал изучать самый популярный язык интерфейса — javascript.
В отличие от ruby, javascript — это более..
Разбор строк запроса в vue.js
Иногда вам нужно получить данные из строк запроса, в этой статье показано, как это сделать.
В жизни каждого дизайнера/разработчика наступает момент, когда им необходимо беспрепятственно..
Предсказание моей следующей любимой книги 📚 Благодаря данным Goodreads и машинному обучению 👨💻
«Если вы не любите читать, значит, вы не нашли нужную книгу». - J.K. Роулинг
Эта статья сильно отличается от тех, к которым вы, возможно, привыкли . Мне очень понравилось поработать над..