将文件上传到 Angular 项目中的资产文件夹

Question

我想'upload'一个pdf文件到资产文件夹。我可以使用 pdf-viewer 显示资产文件夹中的 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

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

您必须在节点上编写自己的服务器并对其进行配置，以便它 return index.html 绑定 angular 代码到浏览器。现在在此 SPA 中，如果您上传任何文件，请向同一服务器的端点发出 http 请求。定义一个控制器，它接受这个文件并将它放在任何 public 文件夹中。

更好的方法是分离前端和后端。运行您的 angular 应用位于 localhost:4200。运行您在其他端口的服务器应用程序（您可以使用节点、Java、Golang 等创建服务器...可以处理 HTTP 请求）。使用 HttpClient 将您的文件作为 FORMDATA 从您的 angular 应用程序发送到服务器。

Answer 2

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

章节：渲染本地 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 文件，它会立即显示在您的网页上。

将文件上传到 Angular 项目中的资产文件夹

Upload file to asset folder in Angular project

pdf

upload

file

typescript

angular