angular本地上传预览图片

1. 关于在Angular中进行本地上传、临时图片预览功能的注意事项：

1、将input的change事件返回的临时图片路径转化为安全的DOMString，该url的生命周期和创建它的窗口中的document绑定。
参考链接：https://angular.cn/api/platform-browser/DomSanitizer

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

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

import { DomSanitizer } from '@angular/platform-browser';
constructor(
    private sanitizer: DomSanitizer,
) { }

// input本地上传的change回调事件
imgUpload(event) {
    // 本地所选图片信息(可以直接以formData的形式传给后台！)
    const imgFileData = event.target.files[0]; 
    // 将该图片转化为安全的url去使用在<img src>中 (用于所选图片的本地临时预览)
    const temImgUrl = this.sanitizer.bypassSecurityTrustUrl(window.URL.createObjectURL(imgFileData));  
}

2. 关于FormData知多少？

参考链接：https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

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

let formData = new FormData();

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

append方法：会添加一个新值到FormData对象，如果键已经存在，后面的并不会覆盖前面的。

set方法：如果指定的键已经存在，会使用新的值去覆盖已有的值。

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

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

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

formData.get(name);

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

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