一，今天完成的事情

给新增页面添加上传图片功能，没有直接去ui-组件上copy 

upload组件，而是先按照官网的任务要求尝试做了一下，

然并软，并不顺利。。

1，首先了解了一下file

通常情况下， File 对象是来自用户在一个 <input> 元素上选择文件后

返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象，

或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。在Gecko中，

特权代码可以创建代表任何本地文件的File对象，而无需用户交互

File 对象是特殊类型的 Blob，且可以用在任意的 Blob 类型的 context 中。

比如说， FileReader, URL.createObjectURL(), createImageBitmap(), 

及 XMLHttpRequest.send() 都能处理 Blob 和 File。

2，根据使用 type="file" 的 <input> 元素使得用户可以选择一个或多个元素

以提交表单的方式上传到服务器上，或者通过 Javascript 的 File API 对文件

进行操作

3，接着在项目中ng g c 了一个新组件用来实现上传功能

在html中添加按钮

<input type="file" accept="image/jpg, image/jpeg, image/png" (change)="imgUpload($event)" />

其中accept 属性是一个字符串，它定义了文件 input 应该接受的文件类型。

change事件是来返回临时图片路径转化为安全的DOMString，该url的生命

周期和创建它的窗口中的document绑定。

 在ts文件中的回调函数

                 // input本地上传的change回调事件

               imgUpload(event) {

               // 本地所选图片信息(可以直接以formData的形式传给后台！)

               const imgFileData = event.target.files[0]; 

               // 将该图片转化为安全的url去使用在<img src>中 (用于所选图片的本地临时预览)

               const temImgUrl = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(imgFileData));  

               }

注意要引入模块且声明

        import { DomSanitizer } from '@angular/platform-browser';

        constructor(    private sanitizer: DomSanitizer,) { }

还要去除默认样式

// 去除input type="file"的自身样式 .custom-upload-input {    opacity: 0;  }

4,学习了一下FormData对象

创建一个空的FormData对象：new FormData()

向FormData内添加键/值：FormData.append()

append方法：会添加一个新值到FormData对象，

如果键已经存在，后面的并不会覆盖前面的。

formData.append('username', 'Chris');

获取FormData中和指定的键关联的第一个值：FormData.get()

getAll()：返回该FormData中和指定的键对应的所有的值。formData.get(name);

• 返回FormData包含的所有的key：formData.keys()

• 返回FormData对象是否含有某个key ：formData.has(name)

二，明天计划接着做任务。