Angular2-primeNG 文件上传模块FileUpload

来源：互联网发布：ubuntu 文件夹root权限编辑：程序博客网时间：2024/05/29 17:20

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

文件上传模块FileUploadModule

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

本例中为：

admin.module.tsimport {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/*" maxFileSize="1000000">         <template pTemplate type="content">             <ul *ngIf="photoFiles.length">                 <li *ngFor="let file of photoFiles">                     {{file.name}} - {{file.size}} bytes                 </li>             </ul>         </template>     </p-fileUpload></div><!--如果图片上传成功，显示图片 --><div *ngIf="demo.photo">    <img src="{{photoUrl}}"></div>

在组件里写入事件处理及定义变量：

demo-add.component.ts:class Demo{    photo:String;}demo = new Demo();photoFiles: any[] = [];photoUrl:string;onPhotoUpload(event) {    this.demo.photo = JSON.parse(event.xhr.response).data.name;    this.photoUrl ="upload/demo/"+this.demo.photo;        for(let file of event.files) {            this.photoFiles.push(file);        }    }

onPhotoUpload函数为onUpload（上传）异步事件触发的回调函数，接收一个$event参数，这里我们用到的是event.xhr，这是一个XMLHTTPREQUEST对象。我们用JSON.parse去解析
后台NODEJS代码：

router.post('/upload', function (req, res) {    //文件    const photoData = req.files.uploadPhoto[0];    //文件路径    const filePath = photoData.path;    //读取文件    fs.readFile(filePath, function (err, data) {        //取时间戳用来命名        const timestamp = Date.now();        //取文件类型用来命名        const type = photoData.type.split('/')[1];        //命名文件        const photo = timestamp + '.' + type;        //存储路径        const newPath = path.join(__dirname, '../', 'upload/demo/' + photo);        //写入文件        fs.writeFile(newPath, data, function (err) {            //返回状态1表示成功，返回的数据是存储后的文件名            const reply = {                status: 1,                data: {                    name: photo                }            };            res.end(JSON.stringify(reply));        })    });});

至此FileUpload异步上传文件,成功后显示文件的功能就实现了

0 0