嗨,在我的 Angular 2 应用程序中,我正在使用 ng2-file-upload:
<input type="file" ng2FileSelect [uploader]="uploader" multiple (change)="onChange($event)">
我想在 uploader 或 event 对象的 javascript 代码中创建一个 image 对象的实例。有点像:
public onChange(event) {
let item = this.uploader.queue[0];
let img = new Image();
img.src = item.SOMETHING;
OR
img.src = event.SOMETHING;
}
我不知道该怎么做。
最佳答案
您可以在没有任何第三方库的情况下做到这一点。
helloworld.component
import {Component} from 'angular2/core';
@Component({
// Declare the tag name in index.html to where the component attaches
selector: 'hello-world',
// Location of the template for this component
templateUrl: 'src/hello_world.html',
styles: [`
.preview img{
max-height: 50px;
}
`]
})
export class HelloWorld {
// Declaring the variable for binding with initial value
yourName: string = '';
fileChange(event) {
let fileList: FileList = event.target.files;
if(fileList.length > 0) {
let file: File = fileList[0];
var img = document.querySelector("#preview img");
img.file = file;
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
}
}
src/hello_world.html
<div id="preview" class="preview">
<img src="">
</div>
<form>
<input type="file" (change)="fileChange($event)" placeholder="Upload file">
</form>
关于 Angular 2 : get image from file upload,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44647824/