Загрузить файл в папку активов в проекте Angular
Я хотел бы «загрузить» файл PDF в папку активов. Я могу отобразить файл PDF из папки активов с помощью pdf-viewer. Для моего проекта (который должен работать только локально) я хотел бы иметь возможность загрузить файл в папку ресурсов.
Информация о моей версии:
Angular CLI: 11.0.2
Node: 15.3.0
OS: win32 x64
Angular: 11.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1100.2
@angular-devkit/build-angular 0.1100.2
@angular-devkit/core 11.0.2
@angular-devkit/schematics 11.0.2
@angular/cdk 11.0.1
@angular/material 11.0.1
@schematics/angular 11.0.2
@schematics/update 0.1100.2
rxjs 6.6.3
typescript 4.0.5
Ответы 2
Вы не можете загружать что-либо в любую папку без использования программирования на стороне сервера. Большинство приложений Angular запускаются на сервере узла. Этот сервер не запрограммирован на то, чтобы брать файл и помещать его в любую папку в качестве статического актива.
Вы должны написать свой собственный сервер на узле и настроить его так, чтобы он возвращал index.html в браузер с включенным угловым кодом. Теперь в этом SPA, если вы загружаете какой-либо файл, сделайте http-запрос к конечной точке того же сервера. Определите контроллер, который берет этот файл и помещает его в любую общую папку.
Лучший подход — разделить ваш интерфейс и серверную часть. Запустите приложение angular на локальном хосте: 4200. Запустите серверное приложение на другом порту (вы можете создать сервер, используя node, Java, Golang и т. д., который может обрабатывать HTTP-запросы). Отправьте файл как FORMDATA из своего углового приложения с помощью HttpClient на сервер.
ОБНОВЛЕНИЕ: Я решил эту проблему сам. Просто взгляните на эту страницу:
Глава: Рендеринг локального файла PDF
https://www.npmjs.com/package/ng2-pdf-viewer
Установите PdfViewerModule в приложение Angular, выполнив команду:
npm install ng2-pdf-viewer
Добавьте импорт в свой App-Module.ts
import { PdfViewerModule } from 'ng2-pdf-viewer';
Добавьте это к импорту в App-Module.ts
imports: [
PdfViewerModule
],
Добавьте следующий шаблон в ваш html-файл любого компонента:
<input (change) = "onFileSelected()" type = "file" id = "file">
<pdf-viewer [src] = "pdfSrc" [render-text] = "true" style = "display: block;"></pdf-viewer>
Добавьте следующий код в файл .ts вашего компонента.
pdfSrc: string;
onFileSelected() {
let $img: any = document.querySelector('#file');
if (typeof (FileReader) !== 'undefined') {
let reader = new FileReader();
reader.onload = (e: any) => {
this.pdfSrc = e.target.result;
};
reader.readAsArrayBuffer($img.files[0]);
}
}
Теперь вы можете выбрать pdf-файл из вашей локальной файловой системы, и он сразу же появится на вашей веб-странице.
Спасибо за быстрый ответ. Но в принципе именно так я и не хочу делать ;) Нет ли возможности выбрать файл из вашей локальной файловой системы через угловую веб-страницу и скопировать его в папку с ресурсами?