在本周的项目中接触到了文件上传的功能，总的说来难度不大，但在第一次使用时仍然碰到了不少的问题，好在全部都解决了。
先说说上传文件
上传文件自然就是input将type设置为file,需要注意的是这里通过chang方法传递的值应是$event.target.files。开始时我就想着用ngModel去绑定这个值，但打印出来的东西一看就不对,还多亏黄庭祥告诉我需要用这个。
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './ponent.html',
styleUrls: ['./ponent.css']
})
export class AppComponent {
fileChange(file: File[]) {
console.log(file);
}
}
打印结果如下，可以看出是一个文件对象的数组
把这个传给后端，保存的事就交给后端了。
只想要图片?
想要固定用户能发送的文件类型？很简单，只需要一个accpet属性就好了，比如只想要.png的图片
其他类型的文件就看不到了，让我们对比一下。
更多相关操作可以看看这篇文章。
预览图片
用户选完图片忘了自己选的是啥咋办？毕竟可没多少人愿意给图片规规矩矩命名，让用户按名字再去看选的是那张，这无疑是相当不友好的。所以让他能看到自己选的图片的预览无疑是必须的。
代码如下
import {Component} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './ponent.html',
styleUrls: ['./ponent.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却始终实现不了，也不知道为啥。
