Angular2-primeNG 文件上传模块FileUpload

最新推荐文章于 2024-05-28 09:42:09 发布

weixin_36333953

最新推荐文章于 2024-05-28 09:42:09 发布

阅读量3.6k

点赞数

分类专栏： angular2-perimeNG 文章标签：经验 primeng angular2

本文链接：https://blog.csdn.net/weixin_36333953/article/details/52961877

版权

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

摘要由CSDN通过智能技术生成

近期在学习使用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=