1.Angular中使用模版变量，TS语法检查无法获取其原型链 2.通过button点击input上传文件的解决方案

事情是这样的。

我要做一个上传按钮。产品经理不让用花里胡哨的NG组件库，那我只好自己写input上传了。由于button包不住input。那我就搞了邪道。

<button 
    nz-button 
    nzType="primary"
    (click)="clckInputElement(uploadFileElement)"
 >上传报告
<input
   #uploadFileElement                           
   type="file"
   (change)="handleChange($event)"
   style="display:none"
   id="uploadThirdPartReports"
   accept="application/pdf"
   multiple
</button>

clckInputElement(e) {
// 通过模板变量来点击input
        e.click();
   }

input直接隐藏，通过ts，点击button相当于点击input，跳出文件框。

接下来我获取的是模版变量#uploadFileElement ，相当于直接拿到了这个Dom对象。

run

结果是输出了一段html文本。打开谷歌，提示说HTMLElement没有files方法。于是在es6里找了下有files属性的类型，是HTMLInputElement类型。于是就强制它转换成这个类型。

 const uploadsFile=<HTMLInputElement>document.getElementById(name).files[0];

那么我下一步操作是获取文件的arrayBuffer我就直接

 const uploadsFile=<HTMLInputElement>document.getElementById(name).files[0].arrayBuffer();

发现没毛病，的到一个Promise，然后我继续than，提示错误 arrayBuffer() is not a function

原因：TS语法检查不知道你是什么东西，自然无法知道他的原型链

解决方案：继续判定类型，先为unkonw 再为promise

const fileBytesAsPromise = <HTMLInputElement>e.target.files[i].arrayBuffer() as unknown as Promise<File>;

后续的链式操作同理。先定义其类型，让TS知道其原型。

2022/5/31 复盘

Angular2里获取（input file）上传文件的内容的方法 | 内容Angular2里获取（input file）上传文件的内容的方法, 内容的个人空间.https://www.lmlphp.com/user/16745/article/item/577910/这个哥们和我遇到了同样的问题，通过value来解决也不失为一种好方法。

2022/6/1

👴 终于解决了这个task，前端跑到后端没毛病。经历了：

1.建实体

2.建各种Dto

3.EFcore映射

4.写接口，前后连调

5.各种疑难杂症

6.增加对产品经理对怨念 : (

7.前端造轮子，写样式