将文件上载到Angular项目中的资源文件夹

Question

我想"上传"一个pdf文件到资产文件夹。我可以用pdf查看器显示资产文件夹中的pdf文件。对于我的项目(应该只在本地运行(，我希望有可能将文件上传到资产文件夹。

我的版本信息：

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

Answer 1

UPDATE：我自己解决了这个问题。看看这个页面：

章节：渲染本地PDF文件

https://www.npmjs.com/package/ng2-pdf-viewer

通过运行以下命令安装到您的Angular应用程序PdfViewerModule：

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文件，它会立即显示在您的网页上。

Answer 2

如果不使用服务器端编程，就无法将任何内容上传到任何文件夹中。大多数Angular应用程序都在节点服务器上运行。此服务器未编程为将文件作为静态资产放入任何文件夹中。

您必须在节点上编写自己的服务器，并对其进行配置，使其将index.html与绑定的angular代码一起返回到浏览器。现在，在这个SPA中，若您上传任何文件，请向同一服务器的端点发出http请求。定义一个控制器，该控制器接受此文件并将其放在任何公用文件夹中。

更好的方法是，将前端和后端解耦。在localhost:4200上运行您的angular应用程序。在其他端口运行服务器应用程序(您可以使用node、Java、Golang等创建一个服务器……它可以处理HTTP请求(。使用HttpClient将你的文件作为FORMDATA从你的angular应用程序发送到服务器。