Angular2-primeNG 文件上传模块FileUpload

最新推荐文章于 2026-02-16 02:02:58 发布

原创

最新推荐文章于 2026-02-16 02:02:58 发布 · 3.8k 阅读

标签

#经验 #primeng #angular2

收录于

本文介绍了在Angular2项目中使用primeNG的FileUploadModule进行文件上传的实践经验。首先需要在模块中导入FileUploadModule，然后在HTML页面添加组件，并在组件中定义事件处理函数onPhotoUpload，此函数处理onUpload事件并解析xhr对象。通过NODEJS后端代码，实现了文件上传并展示成功的结果。

近期在学习使用Angular2做小项目，期间用到很多primeNG的模块
本系列将结合实战总结angular2-primeNG各个模块的使用经验

文件上传模块FileUploadModule

首先要在使用该组件的模块内导入文件上传模块

本例中为：

admin.module.ts
import {FileUploadModule} from 'primeng/primeng';
@NgModule({
   
   
    imports: [FileUploadModule]
})

在需要使用上传功能的组件的HTML页里添加：

demo-add.component.html:
<label>照片：</label>
<div>
    <!--上传组件 -->
     <p-fileUpload 
         name="uploadPhoto[]" 
         url="http://localhost:3333/api/upload"
         (onUpload)="onPhotoUpload($event)" accept="image/*"<