时间戳

首页 > 解决方案 > 将文件上传到 Angular 项目中的资产文件夹

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

问题描述

我想将 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

标签： angulartypescriptfilepdfupload

解决方案

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

章节：渲染本地 PDF 文件

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

通过运行命令安装到您的 Angular App 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 文件，它会立即显示在您的网页上。

推荐阅读