将文件上传到Angular项目中的资产文件夹 [英] Upload file to asset folder in Angular project

问题描述

我想将pdf文件上传"到资产文件夹.我可以使用pdf-viewer从资产文件夹显示pdf文件.对于我的项目(只能在本地运行)，我希望可以将文件上传到资产文件夹.

I would like to 'upload' a pdf file to asset folder. I am able to display a pdf file from asset folder with pdf-viewer. For my project (which should only run locally) I would like to have the possibility to upload a file to the asset folder.

我的版本信息:

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

推荐答案

更新:我自己解决了这个问题.只需看一下此页面:

UPDATE: I solved this issue by myself. Just take a look at this page:

章节:渲染本地PDF文件

Chapter: Render local PDF file

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

通过运行以下命令安装到Angular App PdfViewerModule:

Install to your Angular App PdfViewerModule by running command:

npm install ng2-pdf-viewer

将导入添加到您的App-Module.ts

Add the import to your App-Module.ts

import { PdfViewerModule } from 'ng2-pdf-viewer';

将此添加到App-Module.ts中的导入

Add this to imports in App-Module.ts

imports: [
    PdfViewerModule
  ],

将以下模板添加到任何组件的html文件中:

Add following template to your html file of any component:

<input (change)="onFileSelected()" type="file" id="file">
<pdf-viewer [src]="pdfSrc" [render-text]="true" style="display: block;"></pdf-viewer>

将以下代码添加到组件的.ts文件中.

Add following code to .ts file of your component.

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

Now you can choose a pdf file from your local file system and it is immediately shown on your webpage.

这篇关于将文件上传到Angular项目中的资产文件夹的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！