Angular中,如何获取p-fileUpload标签上传的文件, this.uploadedFile = event.files[0];获取的图片怎么存入../../../assets/photos
时间: 2024-02-03 17:03:21 浏览: 167
在Angular中,可以使用File API获取文件内容并将其存储在本地。以下是一些实现方式:
1. 通过<input type="file">元素上传文件
可以使用以下代码获取input元素中的文件:
```
onFileSelect(event) {
if (event.target.files.length > 0) {
const file = event.target.files[0];
this.uploadedFile = file;
}
}
```
其中,this.uploadedFile是一个文件类型的实例,可以在需要时将其存储在本地。
2. 通过p-fileUpload组件上传文件
p-fileUpload组件是PrimeNG中的文件上传组件,可以使用以下代码获取上传的文件:
```
onFileSelect(event) {
if (event.files.length > 0) {
const file = event.files[0];
this.uploadedFile = file;
}
}
```
其中,this.uploadedFile是一个文件类型的实例,可以在需要时将其存储在本地。
3. 存储文件
要将文件存储在本地,可以使用FileReader API。以下是一个示例代码,将上传的文件存储在assets/photos目录下:
```
onFileSelect(event) {
if (event.target.files.length > 0) {
const file = event.target.files[0];
this.uploadedFile = file;
const reader = new FileReader();
reader.onload = (e) => {
const base64 = reader.result as string;
const byteArray = new Uint8Array(atob(base64.split(',')[1]).split('').map(char => char.charCodeAt(0)));
const blob = new Blob([byteArray], { type: 'image/jpeg' });
const url = `../../../assets/photos/${file.name}`;
saveAs(blob, url);
};
reader.readAsDataURL(file);
}
}
```
其中,使用FileReader API将文件转换为base64格式,并将其保存为Blob。然后使用FileSaver API将Blob存储在本地文件系统中。此示例中的文件名采用上传文件的原始名称。
阅读全文