Angular PrimeNG FileUpload Пользовательская загрузка

Опубликовано: 23 Февраля, 2023

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. В этой статье мы увидим, как использовать пользовательскую загрузку FileUpload в Angular PrimeNG.

Пользовательская загрузка Angular PrimeNG FileUpload используется для переопределения реализации загрузки путем определения пользовательского события обработчика загрузки.

Пользовательские свойства загрузки Angular PrimeNG FileUpload:

имя: это имя параметра запроса для распознавания загруженного файла на бэкэнде.
URL-адрес: это удаленный URL-адрес для загрузки файла.
customUpload: используется для определения того, следует ли использовать загрузку по умолчанию или использовать пользовательскую реализацию загрузки, определенную с помощью uploadHandler.
auto: это логическое свойство, при включении которого файлы будут загружаться автоматически при выборе.

Синтаксис:

// In app.component.html
<p-fileUpload name="..."
                url="..."
              [customUpload]="true"
              (uploadHandler)="function()">
</p-fileUpload>

// In app.component.ts
function() {
  // function content
}

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Установите PrimeNG в указанный вами каталог.

npm install primeng --save
npm install primeicons --save

Структура проекта: Это будет выглядеть следующим образом:

Пример 1: Ниже приведен простой пример, демонстрирующий использование пользовательской загрузки Angular PrimeNG FileUpload.

app.component.html

HTML

<h2 style="color: green">
  GeeksforGeeks
</h2>
<h4>
      Angular PrimeNG FileUpload Custom Upload
</h4>
  
<p-fileUpload name="myfile[]"
              url="./upload.php"
              [customUpload]="true"
              (uploadHandler)="uploadfun($event)"
              [auto]="true">
</p-fileUpload>

app.component.ts

Javascript

import { Component, OnInit } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [],
})
export class AppComponent {
    constructor() { }
    ngOnInit() { }
    uploadfun(event) {
        console.log(event);
    }
}

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { FileUploadModule } from "primeng/fileupload";
import { AppComponent } from "./app.component";
import { HttpClientModule } from "@angular/common/http";
import { ButtonModule } from "primeng/button";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        HttpClientModule,
        FileUploadModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Пример 2: Ниже приведен еще один пример, демонстрирующий использование пользовательской загрузки Angular PrimeNG FileUpload, где мы загружаем несколько файлов с помощью перетаскивания с пользовательской функцией загрузки.

app.component.html

HTML

<h2 style="color: green">
  GeeksforGeeks
</h2>
<h4>
      Angular PrimeNG FileUpload Custom Upload
</h4>
  
<p-fileUpload name="myfile[]"
              url="./upload.php"
              multiple="multiple"
              [customUpload]="true"
              (uploadHandler)="uploadfun($event)"
              [auto]="true">
</p-fileUpload>

app.component.ts

Javascript

import { Component, OnInit } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [],
})
export class AppComponent {
    constructor() { }
    ngOnInit() { }
    uploadfun(event) {
        console.log("Multiple Files are uploaded: ", event.files);
    }
}

app.module.ts

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } 
    from "@angular/platform-browser";
import { BrowserAnimationsModule } 
    from "@angular/platform-browser/animations";
import { FileUploadModule } from "primeng/fileupload";
import { AppComponent } from "./app.component";
import { HttpClientModule } from "@angular/common/http";
import { ButtonModule } from "primeng/button";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        ButtonModule,
        HttpClientModule,
        FileUploadModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

Выход:

Ссылка: https://primefaces.org/primeng/fileupload

Technical Scripter Picked AngularJS

Angular PrimeNG FileUpload Пользовательская загрузка

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ