我想使用ng2-file-upload和Angular 6获取并检查上传图像的宽度和高度。
到目前为止,我的代码是:
constructor() {
this.uploader = this.initializeUploader("url");
}
public uploader;
private initializeUploader(url: string): FileUploader {
const uploadOptions: FileUploaderOptions = {
allowedMimeType: ['image/jpeg', 'image/png' ],
}
const uploader = new FileUploader(uploadOptions);
uploader.onAfterAddingFile = item => {
console.log(item);
//Want to get width here
}
return uploader;
}
和HTML:
<input type="file" ng2FileSelect [uploader]="uploader" />
我一直在寻找解决方案,但对我没有任何帮助。找到了使用的想法
Upload.imageDimensions(file).then()
here。但我不知道如何/在何处导入“上传”。还找到了添加
的解决方案ngf-min-height="1"
在输入元素中,但是如果输入图像的大小错误,我找不到可以“捕获”错误的位置。
答案 0 :(得分:1)
将文件转换为base64,然后创建一个以该base为源的图像。在load
钩子期间,您可以获取图像的大小。这是一个工作片段!
function change() {
const input = document.querySelector('input');
const file = input.files[0];
getBase64(file).then(base64 => {
const img = new Image();
img.onload = () => console.log(img.width, img.height);
img.src = base64;
});
}
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
<input type="file" onchange="change()">
答案 1 :(得分:0)
最后,我对Trichetriche的帖子进行了一些更改:
public change() {
const input = document.querySelector('input');
const file = input.files[0];
this.getBase64(file).then(base64 => {
const img = new Image();
img.onload = () => console.log(img.width, img.height);
img.src = base64.toString();
});
}
public getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}
和html:
<input type="file" (change)="change()">