import {FileUploadModule} from 'primeng/primeng';
@NgModule({
imports: [FileUploadModule]
})
<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>
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);
}
}
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));
})
});
});
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有