如何在没有jQuery的情况下上传到服务器之前，从输入标签中获取Angular 2(或更高版本)图像的高度和宽度?

Question

我检查了各种来源，但大多数解决方案都在jQuery中。如果可能的话，我希望使用打字稿中的解决方案。

.HTML-

<input #coverFilesInput class="file-input" type="file"(change)="onChange($event)"....>

打字稿 -

onChange($event) { let img = event.target.files[0]; // and then I need code to validate image size }

有解决方案还是我完全错了？

Answer 1

可以使用@ViewChild and ElementRef的组合来访问文件上传控件，并在每次上传后清除其值，否则不会触发(change)事件。

然后，您可以使用FileReader()将文件读入Image对象并从中获取宽度和高度。

这是下面的代码 -

网页模板

<input type="file" #coverFilesInput (change)="onChange($event)" class="file-input"  />
Upload Percent: {{percentDone}}% <br />
<ng-container *ngIf="uploadSuccess">
Upload Successful of file with size : {{size}} bytes <br>
The image height is : {{height}} <br>
The image width is : {{width}} <br>
</ng-container> 

onChange 方法

onChange(evt:any){
this.percentDone = 100;
this.uploadSuccess = true;
let image:any = evt.target.files[0];
this.size = image.size;
let fr = new FileReader();
fr.onload = () => { // when file has loaded
var img = new Image();
img.onload = () => {
this.width = img.width;
this.height = img.height;
};
img.src = fr.result; // The data URL 
};
fr.readAsDataURL(image);
this.imgType.nativeElement.value = ""; // clear the value after upload
}

完整的代码应用程序.组件.ts

import { Component, VERSION ,ViewChild,ElementRef} from '@angular/core';
import {HttpClientModule, HttpClient, HttpRequest, HttpResponse, HttpEventType} from '@angular/common/http';
@Component({
selector: 'my-app',
template: `
Version = {{version.full}} <br/>
<input type="file" #coverFilesInput (change)="onChange($event)" class="file-input"  />
Upload Percent: {{percentDone}}% <br />
<ng-container *ngIf="uploadSuccess">
Upload Successful of file with size : {{size}} bytes <br>
The image height is : {{height}} <br>
The image width is : {{width}} <br>
</ng-container> 
`,
})
export class AppComponent {
percentDone: number;
uploadSuccess: boolean;
size:any;
width:number;
height:number;
@ViewChild('coverFilesInput') imgType:ElementRef;
constructor(
) { }
version = VERSION
onChange(evt:any){
this.percentDone = 100;
this.uploadSuccess = true;
let image:any = evt.target.files[0];
this.size = image.size;
let fr = new FileReader();
fr.onload = () => { // when file has loaded
var img = new Image();
img.onload = () => {
this.width = img.width;
this.height = img.height;
};
img.src = fr.result; // This is the data URL 
};
fr.readAsDataURL(image);
this.imgType.nativeElement.value = "";
}  
}

这是一个工作演示： https://stackblitz.com/edit/angular-file-upload-hnik7q

编辑 ：您还可以使用[(ngModel)]="selectedFile"访问输入文件控件并在验证和上传完成后清除其值，而无需使用如下所示的@ViewChild和ElementRef-

<input type="file" #coverFilesInput (change)="onChange($event)" class="file-input"  [(ngModel)]="selectedFile"/>

在组件类中 -

export class AppComponent {
percentDone: number;
uploadSuccess: boolean;
size:any;
width:number;
height:number;
selectedFile:any; // declare the property
constructor(
) { }
version = VERSION
onChange(evt:any){
this.percentDone = 100;
this.uploadSuccess = true;
let image:any = evt.target.files[0];
this.size = image.size;
let fr = new FileReader();
fr.onload = () => { // when file has loaded
var img = new Image();    
img.onload = () => {
this.width = img.width;
this.height = img.height;
};    
img.src = fr.result; // This is the data URL 
};    
fr.readAsDataURL(image);
this.selectedFile = ""; // clear the file here
}        
}

Answer 2

试试这种方式，它对我有用！！

// in your .html file
<input type="file" class="form-control"
accept="image/*" 
(change)="onChange($event)">    
// in your .ts file
onChange(fileInput: any) {
const URL = window.URL || window.webkitURL;
const Img = new Image();
const filesToUpload = (fileInput.target.files);
Img.src = URL.createObjectURL(filesToUpload[0]);
Img.onload = (e: any) => {
const height = e.path[0].height;
const width = e.path[0].width;
console.log(height,width);
}
}

Answer 3

尝试使用ElementRef。

首先，您需要将 dom 元素标记为#myImage

然后在组件类中，您可以使用ViewChild定位 dom 元素

ViewChild('myImage') myImage: ElementRef;

加载视图后，您可以提取图像详细信息

ngAfterViewInit() { console.log(this.myImage.nativeElement.offsetWidth); console.log(this.myImage.nativeElement.offsetHeight); }

由于您只是提取有关 dom 元素的信息，因此安全风险很低。我建议您不要使用此方法修改 dom 元素。