源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Angular2-primeNG文件上传模块FileUpload使用详解

  • 时间:2021-12-06 17:46 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Angular2-primeNG文件上传模块FileUpload使用详解
近期在学习使用Angular2做小项目,期间用到很多primeNG的模块。 本系列将结合实战总结angular2-primeNG各个模块的使用经验。 [b]文件上传模块FileUploadModule[/b] 首先要在使用该组件的模块内导入文件上传模块 本例中为: 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/*" 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)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部