angular 上传图片并显示_angular 上传图片预览

在本周的项目中接触到了文件上传的功能，总的说来难度不大，但在第一次使用时仍然碰到了不少的问题，好在全部都解决了。

先说说上传文件

上传文件自然就是input将type设置为file,需要注意的是这里通过chang方法传递的值应是$event.target.files。开始时我就想着用ngModel去绑定这个值，但打印出来的东西一看就不对,还多亏黄庭祥告诉我需要用这个。

import { Component } from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

fileChange(file: File[]) {

console.log(file);

}

}

打印结果如下，可以看出是一个文件对象的数组

把这个传给后端，保存的事就交给后端了。

只想要图片?

想要固定用户能发送的文件类型？很简单，只需要一个accpet属性就好了，比如只想要.png的图片

其他类型的文件就看不到了，让我们对比一下。

更多相关操作可以看看这篇文章。

预览图片

用户选完图片忘了自己选的是啥咋办？毕竟可没多少人愿意给图片规规矩矩命名，让用户按名字再去看选的是那张，这无疑是相当不友好的。所以让他能看到自己选的图片的预览无疑是必须的。

代码如下

import {Component} from '@angular/core';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

public imagePath;

imgURL: any;

public message: string;

fileChange(files) {

console.log(files);

if (files.length === 0) {

return;

}

const reader = new FileReader();

this.imagePath = files;

reader.readAsDataURL(files[0]);

reader.onload = () => {

this.imgURL = reader.result;

};

}

}

不过我使用@ViewChild却始终实现不了，也不知道为啥。