极客教程Angular PrimeNG FileUpload组件
Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。在这篇文章中，我们将了解如何在Angular PrimeNG中使用FileUpload组件。我们还将学习属性、事件、方法和造型，以及代码中使用的语法。
FileUpload组件：它用于制作一个提供用户上传文件内容的元素。
属性：
- name: 这是请求参数的名称。它是字符串数据类型，默认值为空。
- url。它是上传文件的网址。它是字符串数据类型，默认值为空。
- method。它指定了用于发送的HTTP方法。它是字符串数据类型，默认值是post。
- multiple: 它用于一次选择多个文件。它是布尔数据类型，默认值是false。
- 接受。它是限制允许的文件类型的模式。它是字符串数据类型，默认值是false。
- disabled:它用于禁用上传功能。它是布尔数据类型，默认值是false。
- 自动。它指定了选择完成后是否自动开始上传。它是布尔数据类型，默认值是false。
- maxFileSize。它是允许的最大文件大小，单位是字节。它是数字数据类型，默认值为空。
- fileLimit: 它是可以上传的最大文件数。它是数字数据类型，默认值为空。
- invalidFileSizeMessageSummary：它是无效文件大小的摘要信息。它是字符串数据类型，默认值是{0}。无效的文件大小。
- invalidFileSizeMessageDetail。它是无效文件大小的详细信息。它是字符串数据类型，默认值是 “最大上传尺寸是{0}”。
- invalidFileTypeMessageSummary：它是无效文件类型的摘要信息。它是字符串数据类型，默认值是”{0}。无效的文件类型，”。
- invalidFileLimitMessageDetail。它是无效文件类型的详细信息。它是字符串数据类型，默认值是 “最多限制为{0}”。
- invalidFileLimitMessageSummary：它是无效文件类型的摘要信息。它是字符串数据类型，默认值是 “超过了最大文件数”。
- invalidFileTypeMessageDetail。它是无效文件类型的详细信息。它是字符串数据类型，默认值是 “允许的文件类型。{0}”.
- style。它用于指定组件的内联风格。它是字符串数据类型，默认值为空。
- styleClass。它用于指定组件的风格类别。它是字符串数据类型，默认值为空。
- previewWidth: 它是图像缩略图的宽度，单位是像素。它是数字数据类型，默认值是50。
- choiceLabel。它是选择按钮的标签。它的数据类型为字符串，默认值为空。
- uploadLabel。它是上传按钮的标签。它是字符串数据类型，默认值为空。
- cancelLabel。它是取消按钮的标签。它是字符串数据类型，默认值为空。
- chooseIcon: 它是选择按钮的图标。它是字符串数据类型，默认值是pi-plus。
- uploadIcon: 它是上传按钮的图标。它是字符串数据类型，默认值是pi pi-upload。
- cancelIcon：它是取消按钮的图标。它是字符串数据类型，默认值是pi pi-times。
- mode。它用于定义组件的用户界面。它是字符串数据类型，默认值是高级。
- customUpload。它用于定义是否使用默认上传或在uploadHandler回调中手动定义的实现。它是布尔数据类型，默认值是false。
- showUploadButton。它用于定义上传按钮的可见性。它是布尔数据类型，默认值为真。
- showCancelButton。它用于定义取消按钮的可见性。它是布尔数据类型，默认值为真。
- files。它是要提供给外部的FileUpload的文件列表。它是数组数据类型，默认值为空。
- 头信息。它是HttpHeaders类中代表头的配置选项。它属于HttpHeader数据类型，默认值为空。
Events:
- onBeforeUpload : 这是一个回调，在文件上传被初始化之前启动。
- onSend : 它是一个回调，当请求被发送到服务器时被触发。
- onUpload : 这是一个回调，当文件上传完成时被触发。
- onError : 这是一个回调，在文件上传失败时被触发。
- onClear : 这是一个回调，当队列中的文件被删除而没有使用清除所有按钮上传时，它被触发。
- onRemove : 这是一个回调，当使用文件的清除按钮在没有上传的情况下删除文件时被触发。
- onSelect : 它是一个回调，当文件被选中时被触发。
- onProgress。它是一个回调，当文件被上传时被触发。
- uploadHandler。它是一个回调，在自定义上传模式中被触发，以手动上传文件。
Methods:
- upload : 它用于上传选定的文件。
- clear : 它用于清除文件列表。
Styling:
- p-fileupload。它是容器元素。
- p-fileupload-buttonbar: 它是包含按钮的标题。
- p-fileupload-content。它是内容部分。
创建Angular应用程序和模块安装。
- 第1步：使用以下命令创建一个Angular应用程序。
ng new appname
- 第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
- 第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构。它将看起来像以下。
例子1：这是一个基本的例子，说明了如何使用FileUpload组件。
<h2>GeeksforGeeks</h2>
<h5>PrimeNG FileUpload Component</h5>
<p-fileUpload name="myfile[]"></p-fileUpload>
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { FileUploadModule } from "primeng/fileupload";
import { HttpClientModule } from "@angular/common/http";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FileUploadModule,
HttpClientModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
例子2：在这个例子中，我们将通过使用multiple属性制作一个只接受多个文件和图片的上传元素。
<h2>GeeksforGeeks</h2>
<h5>PrimeNG FileUpload Component</h5>
<p-fileUpload
name="myfile[]"
multiple="multiple"
accept="image/*">
</p-fileUpload>
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {}
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { FileUploadModule } from "primeng/fileupload";
import { HttpClientModule } from "@angular/common/http";
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FileUploadModule,
HttpClientModule,
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
输出:
